- 容器大小尺寸固定
// width, height 分别为容器的宽高
elem {
position: absolute;
left: 50%;
top: 50%;
margin-left: -width/2;
margin-top: -height/2;
}
优点:方法简单, 兼容性好
缺点:容器宽高是要已知固定的,不然就要借助js改变对应margin值
- 容器大小尺寸不固定
elem {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
优点:不要在乎容器的尺寸大小
缺点:css3兼容性问题
- 容器大小尺寸不固定
elem {
vertical-align: middle;
text-align: center
}
elem:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle
}
优点:不用在乎容器的尺寸,兼容性好
缺点:max-width只能达到95%左右
实现原理:让容器相对与它的兄弟伪类实现居中对齐