关于css:CSS水平垂直居中

 这是笔者近日面试中遇到的一个“辣手”问题，所谓辣手，是因为 CSS 这个货色不常常写的话，是肯定会忘，会手生的。笔者只是提及了最常见也是最简略的 Flex，却被面试官持续诘问，本认为会依据记忆写进去点什么，最初却无奈。。。

话不多说了，上干货。

CSS 垂直居中的形式，这里我都以父元素嵌套子元素的模式开展：
已知子元素的宽高的状况下：
absolute + margin:auto

.parent{
    width:500px;
    height:500px;
    border:1px solid #ccc;
    position:relative;
}
.children{
    width:300px;
    height:300px;
    background-color:red;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

absolute + -margin:

.parent{/* 同下面的盒子那样 */}
.children{
    width:300px;
    height:300px;
    background-color:red;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
}

子元素宽高未知的状况下：
flex 布局：

.parent{
    display:flex;
    justify-content:center;
    align-item:center;
}

absolute + transform:

.parent{
    position:relative;
    /* 宽高同下面的盒子一样，这里不再反复设置了 */
}
.children{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}