最近寫前端較多，其中頭疼的一個問題就是居中問題，尤其是垂直居中。
不確定寬高的元素要實現垂直居中，總結了以下三種方式：

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>

案例地址：點選一下