水平垂直居中的几种写法

容器大小尺寸固定

// 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:
4000
0;
height: 100%;
vertical-align: middle
}

优点：不用在乎容器的尺寸，兼容性好

缺点：max-width只能达到95%左右

实现原理：让容器相对与它的兄弟伪类实现居中对齐