CSS中水平垂直居中的一些实现方法

1.绝对定位方式且已知子元素宽高

position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 300px;
margin-top: -150px;
margin-left: -100px;

2.绝对定位 ＋ 未知宽高 ＋ translate

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3.flex 轻松搞定水平垂直居中(未知宽高)

display: flex;
align-items: center;
justify-content: center;

其他：万能居中

1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模拟表格，all
6.绝对定位，50%减自身宽高
7.绝对定位，上下左右全0，margin:auto
8.绝对定位加相对定位。不需要知道宽高
9.IE6，IE7：给父元素设一个font-size:高度/1.14,vertical-align:middle