水平居中
行内元素居中：text-align：center
块级元素居中：设置宽度，左右margin：auto;
垂直居中
- 居中vs不居中
上下padding相等 - 绝对定位实现居中
.center{
position:absolute;
left:50%;
right:50%;
margin-left:-(宽度的一半); /*前提是宽高固定*/
margin-top:-(高度的一半);
transform:translate(-50%,-50%); /*不限制宽高，css3属性*/
}
- vertical-align
.box::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}/*父容器伪元素设定基线*/
.box img{
vertical-align:middle;
}/*需要居中的元素*/
- table-cell实现居中
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
}/*父容器设置*/
- flex实现居中
网友评论