不管是前端面試題，還是實(shí)際開(kāi)發(fā)中臣淤，經(jīng)常遇到使模塊垂直居中的需求她紫。
HTML：
<div class="box">
垂直居中
</div>
PC端：
1、基于 絕對(duì)定位
- 兼容性好扭勉，IE6+
- 缺點(diǎn)：需要定寬高
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
2、基于 絕對(duì)定位 （升級(jí)版）
- 兼容性：IE9+
- 缺點(diǎn)：需要定寬高
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: calc( 50% - 100px);
left: calc( 50% - 100px);
}
3苛聘、基于 絕對(duì)定位（最終版）
- 兼容性：IE9+
- 優(yōu)點(diǎn)：不需要定寬高
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
4涂炎、基于 絕對(duì)定位（PC兼容版最佳實(shí)踐）
- 兼容性：IE6+
- 優(yōu)點(diǎn)：代碼簡(jiǎn)潔，不需要定寬高
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
