纯 CSS 实现水平垂直居中
最近的几场面试都问了这个问题，自己也只答了 2 种，感觉面试官不满意，特地总结了几种在开发中比较实用的方法，与大家分享。
一、需要知道 width,height 的方案
1. 绝对定位 + 负外边距
<style type=”text/css”>
.warp{position: relative;}
.box {
width: 200px;
height: 100px;
position: absolute;
top: 50%; left: 50%;
padding: 0;
margin-left: -100px; /* (width + padding)/2 */
margin-top: -50px; /* (height + padding)/2 */
}
</style>
<div class=”warp”>
<div class=”box”>
</div>
</div>
因为 margin/padding 的百分比值是参照父元素的 width，所以无法用百分比。
二、不需要知道 width,height 方案
1. 绝对定位 + margin：auto
<style type=”text/css”>
.warp{position: relative;}
.box {
width: 200px;
height: 100px;
position: absolute;
padding: 0;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<div class=”warp”>
<div class=”box”>
</div>
</div>
利用 margin:auto 自动计算实现
2. 绝对定位 + transform
<style type=”text/css”>
.warp{position: relative;}
.box {
width: 200px;
height: 100px;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class=”warp”>
<div class=”box”>
</div>
</div>
利用 translate 的百分比是相对本元素宽 / 高这一特点实现
3.flex
<style type=”text/css”>
.warp{
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.box {
width: 200px;
height: 100px;
}
</style>
<div class=”warp”>
<div class=”box”>
</div>
</div>
其他
除此之外还有 table-cell 布局，inline-block 布局等，由于在项目中很少用到，而且感觉 table 布局坑太多，就不做描述，有兴趣请自行查找。本文如有错误，请在评论区提出。
最后，四月求个 offer~~
谢谢