纯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~~

谢谢