[前端开发] 垂直居中，flexbox/table-cell/absolute

最近写前端较多，其中头疼的一个问题就是居中问题，尤其是垂直居中。
不确定宽高的元素要实现垂直居中，总结了以下三种方式：

1.absolute布局

代码：

/**
*   absolute布局居中,
*   top和translate(x,y)的y参数控制垂直方向,
*   left和translate()的x参数控制水平方向
*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);

这个有个问题就是，居中元素的父容器也必须是absolute布局。
css样式

.c_box {
    width: 500px;
    height: 500px;
    background: #269abc;
    color: white;
    border-bottom: 1px solid #2e6da4;
    /*transform;*/
}
.center_absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

HTML元素：

<div class="c_box " style="position: absolute">
<pre class="center_absolute">
/**
*   absolute布局居中,
*   top和translate(x,y)的y参数控制垂直方向,
*   left和translate()的x参数控制水平方向
*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
</pre>
</div>

2.table，table-cell布局

各大浏览器基本都支持。基本用法，父容器定义display:table，需要居中的元素定义display:table-cell即可，具体垂直居中也只需要一句话就好了，vertical-align:center。
相对于第一种方式只是代码少了几句，效果一样，具体选择还是要根据整体布局而定。
css样式：

.center_table_cell {
    display: table;
}

.center_table_cell * {
    display: table-cell;
    vertical-align: middle;
}

HTML：

<div class="c_box center_table_cell">
<pre>
/**
*   table,table-cell垂直居中
*/
.center_table_cell {
    display: table;     //父容器布局
}

.center_table_cell * {
    display: table-cell;    //垂直居中元素布局
    vertical-align: middle; //垂直居中
}
</pre>
</div>

3.flexbox

flex布局还有很多让人惊艳的地方，尤其是在移动端，这里就说一个垂直居中。
css：

.center_flexbox {
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
}

HTML：

<div class="c_box center_flexbox">
    <pre>
/**
*   使用flexbox布局,垂直居中
*/
justify-content: center;    //水平居中
align-items: center;        //垂直居中
display: -webkit-flex;      //flex布局
    </pre>
</div>

案例地址：点击一下