对元素居中做一下总结(元素居中)

水平居中

块级元素居中: margin:0 auto;

行内和行内块元素:text-align:center;

浮动元素居中:给浮动元素套个父盒子,给父元素设置margin:0 auto;带着浮动元素居中

绝对定位元素:1. left:50%;margin-left:-自身元素宽度的一半; 

在伸缩盒子中:给父元素设置主轴居中,侧轴居中即可
(align-items:cener; justify-content:center;)
复制代码

垂直居中

    文字在盒子中垂直居中:行高等于高

    图片在盒子中垂直居中:测量

    盒子在盒子中垂直居中:测量

文字垂直居中:行高等于父盒子的高度;

盒子在盒子里面垂直居中:通过测量设置margin-top:;

定位的盒子:top:50%;margin-top:-自身高度的一半。

文字和行内块元素并列的垂直居中:
给行内块元素设置vertical-align:middle; 
复制代码

定位脱标元素盒子居中

1. margin: 0 auto; 只能实现标准流下的盒子居中显示

2.  position: absolute;
    left: 50%;
    margin-left: -25px;

3.  position: absolute;
    left: 50%;
    /* 也是向左移动当前元素宽度的一半 */
    transform: translate(-50%);
复制代码

文字移除省略号显示

/* 设置超出部分的显示方式 */
	overflow: hidden;
	/* 文字溢出显示省略号 */
	text-overflow: ellipsis;
	/* 用来控制显示行数 */
	-webkit-line-clamp: 2;
	/* 文字显示方式,默认水平 */
	-webkit-box-orient: vertical;
	/* 将盒子转为弹性盒子 */
	display: -webkit-box;
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享