總結(jié)當(dāng)前知道的對div嵌套標(biāo)簽水平垂直居中方法稳懒，如果還有新的方法隘梨，請不吝賜教哦。好斟览，下面開始列舉代碼咯。
首先給需要實(shí)現(xiàn)水平垂直居中的兩個(gè)div設(shè)置統(tǒng)一的樣式
.styl {
width: 100%;
height: 300px;
background: #ccc;
margin: 30px auto;
position: relative;
border: 1px solid #000;
}
.box {
width: 200px;
height: 100px;
background: #333;
}
方法一：父標(biāo)簽 table-cell 法
看題目就知道是利用父標(biāo)簽的 display: table-cell,該屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)舰蟆，類似于td標(biāo)簽趣惠。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的。
那么既然父標(biāo)簽已經(jīng)是類似表格單元了身害，那么就可以利用表格單元的屬性vertical-align: middle; 來使得內(nèi)部元素垂直居中了味悄，然后再給子標(biāo)簽 margin:0 auto; 即可，需要說明的是塌鸯，這里的父標(biāo)簽需要設(shè)置寬度侍瑟，不能自適應(yīng)寬度
/*css*/
.styl1 {
width: 1000px;
display: table-cell;
vertical-align: middle;
}
.styl1 .box {
margin: 0 auto;
}
html代碼只要用我們上面的樣式即可，之后的class名只要修改 styl1 為對應(yīng)的樣式名即可丙猬。
/* html */
<div class="styl styl1">
<div class="box"></div>
</div>
方法二：常規(guī) position 及子元素偏移方法
父標(biāo)簽設(shè)置 position:relative,子標(biāo)簽設(shè)置 position:absolute,同時(shí)設(shè)置 left:50%,top:50%,這個(gè)時(shí)候子標(biāo)簽的左上角已經(jīng)垂直水平居中涨颜，再設(shè)置margin的負(fù)值為子元素寬高的50%即可將中心點(diǎn)對齊。
此方法缺點(diǎn)茧球，需要?jiǎng)討B(tài)調(diào)整 margin 偏移量為子標(biāo)簽寬高度的一半這個(gè)值庭瑰，無法自動(dòng)匹配。
.styl2 .box {
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
方法三：CSS3新屬性 transform 的 translate 方法
首先 transform 是css3的新屬性抢埋，該屬性是讓我們對元素進(jìn)行旋轉(zhuǎn)弹灭、縮放、移動(dòng)或傾斜揪垄。那么再看屬性值 translate 是定義2D轉(zhuǎn)換穷吮，就是平面的x,y嘍。知道這些饥努，那么我們在 方法二的基礎(chǔ)上將偏移量通過 transform 來設(shè)置即可捡鱼。
此屬性支持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 方法
此方法依然是在方法二的基礎(chǔ)上修改驾诈，將子元素的left、top伟墙、right翘鸭、bottom都設(shè)置為0，然后再 margin:auto,即可實(shí)現(xiàn)子元素的水平垂直居中戳葵。
此方法好處是自適應(yīng)父標(biāo)簽的寬高就乓，也就是說，無論父標(biāo)簽寬高怎么變都水平垂直居中哦拱烁。
此方法支持IE8+以及其他瀏覽器生蚁。是不是很神奇，具體原因查看 margin:auto實(shí)現(xiàn)絕對定位元素的水平垂直居中
.styl4 .box {
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
方法五：flex 布局方法
flex意為彈性布局戏自，不同于盒模型布局邦投，子元素實(shí)現(xiàn)垂直居中就比較容易了，具體教程可以參看 阮一峰的flex布局教程擅笔，這里只說怎么實(shí)現(xiàn)志衣。
在此我們只要將父標(biāo)簽設(shè)置為 display: flex,并進(jìn)行相應(yīng)的主軸 justify-content: center 和交叉軸上的 align-items: center 對齊方式就可以了屯援。
.styl5 {
justify-content: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
html結(jié)構(gòu)同上
<div class="styl styl5">
<div class="box"></div>
</div>
方法六：偽元素 inline-block/vertical-align 方法
這個(gè)方法主要利用父標(biāo)簽的 ::before 偽元素的 inline-block vertical-align來實(shí)現(xiàn)，比較巧妙念脯，但這個(gè)方法要求子元素的屬性必須是 display: inline-block, 好處依然是父子元素都可以自適應(yīng)寬高并保持水平垂直居中狞洋。css如下：
.styl6 {
text-align: center;
}
.styl6:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.styl6 .box {
display: inline-block;
vertical-align: middle;
}
好，至此總結(jié)了 div內(nèi)部元素水平垂直居中的方法 demo 查看绿店。
