總結當前知道的對div嵌套標簽水平垂直居中方法，如果還有新的方法，請不吝賜教哦。好，下面開始列舉代碼咯。
首先給需要實現水平垂直居中的兩個div設置統一的樣式

.styl {
    width: 100%;
    height: 300px;
    background: #ccc;
    margin: 30px auto;
    position: relative;
    border: 1px solid #000;
}
.box {
    width: 200px;
    height: 100px;
    background: #333;
}

方法一：父標簽 table-cell 法

看題目就知道是利用父標簽的 display: table-cell,該屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。目前IE8+以及其他現代瀏覽器都是支持此屬性的。
那么既然父標簽已經是類似表格單元了，那么就可以利用表格單元的屬性vertical-align: middle; 來使得內部元素垂直居中了，然后再給子標簽 margin:0 auto; 即可，需要說明的是，這里的父標簽需要設置寬度，不能自適應寬度

/*css*/
.styl1 {
    width: 1000px;
    display: table-cell;
    vertical-align: middle;
}
.styl1 .box {
    margin: 0 auto;
}

html代碼只要用我們上面的樣式即可，之后的class名只要修改 styl1 為對應的樣式名即可。

/* html */
<div class="styl styl1">
    <div class="box"></div>
</div>

方法二：常規 position 及子元素偏移方法

父標簽設置 position:relative,子標簽設置 position:absolute,同時設置 left:50%,top:50%,這個時候子標簽的左上角已經垂直水平居中，再設置margin的負值為子元素寬高的50%即可將中心點對齊。
此方法缺點，需要動態調整 margin 偏移量為子標簽寬高度的一半這個值，無法自動匹配。

.styl2 .box {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px;
}

方法三：CSS3新屬性 transform 的 translate 方法

首先 transform 是css3的新屬性，該屬性是讓我們對元素進行旋轉、縮放、移動或傾斜。那么再看屬性值 translate 是定義2D轉換，就是平面的x,y嘍。知道這些，那么我們在 方法二的基礎上將偏移量通過 transform 來設置即可。
此屬性支持IE9以上屬性，而且需要兼容不同瀏覽器寫法。

.styl3 .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

方法四：margin:auto 方法

此方法依然是在方法二的基礎上修改，將子元素的left、top、right、bottom都設置為0，然后再 margin:auto,即可實現子元素的水平垂直居中。
此方法好處是自適應父標簽的寬高，也就是說，無論父標簽寬高怎么變都水平垂直居中哦。
此方法支持IE8+以及其他瀏覽器。是不是很神奇，具體原因查看 margin:auto實現絕對定位元素的水平垂直居中

.styl4 .box {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

方法五：flex 布局方法

flex意為彈性布局，不同于盒模型布局，子元素實現垂直居中就比較容易了，具體教程可以參看 阮一峰的flex布局教程，這里只說怎么實現。
在此我們只要將父標簽設置為 display: flex,并進行相應的主軸 justify-content: center 和交叉軸上的 align-items: center 對齊方式就可以了。

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

html結構同上

<div class="styl styl5">
    <div class="box"></div>
</div>

方法六：偽元素 inline-block/vertical-align 方法

這個方法主要利用父標簽的 ::before 偽元素的 inline-block vertical-align來實現，比較巧妙，但這個方法要求子元素的屬性必須是 display: inline-block, 好處依然是父子元素都可以自適應寬高并保持水平垂直居中。css如下：

.styl6 {
    text-align: center;
}
.styl6:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.styl6 .box {
    display: inline-block;
    vertical-align: middle;
}

好，至此總結了 div內部元素水平垂直居中的方法 demo 查看。