1：思路：使用css3 flex布局
優點：簡單 快捷
缺點：兼容不好吧，詳情見：http://caniuse.com/#search=flex
先看效果
html代碼
<div class='box'>
<div class='box-item'>
</div>
</div>
css代碼
.box {
width: 400px;
border: 1px solid saddlebrown;
height: 300px;
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
.box-item {
height: 20px;
width: 20px;
background: red;
}
2：思路：子元素絕對定位，距離頂部 50%，左邊50%，然后使用css3 transform:translate(-50%; -50%)
優點：高大上,可以在webkit內核的瀏覽器中使用
缺點：不支持IE9以下不支持transform屬性
css代碼
html代碼
方法三：思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中
優點：父元素（parent）可以動態的改變高度（table元素的特性）
缺點：IE8以下不支持
css代碼
html代碼
