內(nèi)部div無確定高度的垂直居中方式有很多乳乌。在查找資料的時(shí)候，我學(xué)習(xí)了以下幾種實(shí)用方式：
第一種：使用 Flex
首先說一下Flexbox市咆。Flexbox是css3的一個(gè)盒子模型汉操，其中我們只要使用align-items和 align-content 就能較為快速地實(shí)現(xiàn)內(nèi)部div沒有確定高度居中方式。
測(cè)試代碼：
html:
<body>
<div class="flexbox">
<div></div>
</div>
</body>
css:
html, body {
margin: 0;
padding: 0;
width: 100% ;
height: 100% ;
}
.flexbox {
display: flex;
align-items: center;
justify-content: center;
width: 100% ;
height: 100% ;
}
.flexbox div {
width: 100px;
height: 50px;
background: #fcf000;
}
效果圖：
使用 Flexbox垂直居中
第二種：使用 transform
transform是css3的新屬性床绪，可以操控節(jié)點(diǎn)的位移客情，旋轉(zhuǎn)等。在垂直居中中癞己，只要用到了transform中的translateX膀斋，translateY這兩個(gè)屬性。
使用translateX痹雅，translateY來居中有以下的幾點(diǎn)要注意的：
- 子div（子節(jié)點(diǎn)）需要使用 position: relative;
- 使用top仰担，left分別為-50%。以及translateX绩社，translateY為50%進(jìn)行位移居中
測(cè)試代碼：
html:
<body>
<div class="transform">
<div></div>
</div>
</body>
css:
html, body {
margin: 0;
padding: 0;
width: 100% ;
height: 100% ;
}
.transform {
width: 100% ;
height: 100% ;
}
.transform div {
position: relative;
width: 100px;
height: 50px;
top: 50% ;
left: 50% ;
transform: translateY(-50%) translateX(-50%);
background: #f96600;
}
效果圖：
使用 transform垂直居中
第三種：使用display屬性
.transform {
width: 100% ;
height: 100% ;
display: table; // 設(shè)置display屬性
}
.transform div {
width: 100px;
height: 50px;
display: table-cell; // 子元素水平居中
vertical-align: middle; // 垂直居中
background: #f96600;
}
這種方法的優(yōu)點(diǎn)在于：
content 可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)摔蓝。
當(dāng) 父節(jié)點(diǎn)里沒有足夠空間時(shí)，content 不會(huì)被截?cái)嘤浒摇＃ㄔ趯?shí)際中這個(gè)是十分實(shí)用的）
而使用絕對(duì)定位content不可以動(dòng)態(tài)改變高度贮尉。
最后，垂直居中方式有很多朴沿，采取合適才是最重要的猜谚。
