写在前面：很多种垂直居中方法，后续陆续添加。
1.flex布局实现垂直居中
只需要给外层盒子设置：
|
.box{
display:flex;
justify-content:center;
align-items:center;
}
|
兼容写法：
|
.box{
display:-webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display:-webkit-flex;/* 新版本语法: Chrome 21+ */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display:-ms-flexbox;/* 混合版本语法: IE 10 */
display:flex;/* 新版本语法: Opera 12.1, Firefox 22+ */
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
|
浏览器兼容性：
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- Android any
- iOS any
2. 绝对定位居中（一）
|
.box {
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
|
注：在Chrome和Opera浏览器中由于margin的原因导致浏览器出现滚动条，根据需要调整吧
浏览器兼容性：
Ch