垂直對齊動態高度元素
直觀地應用 css 不會產生預期的結果,因為
vertical-align:middle
是不適用於塊級元素margin-top:auto
和margin-bottom:auto
使用的值將計算為零margin-top:-50%
基於百分比的邊距值是相對於包含塊的寬度計算的
要獲得最廣泛的瀏覽器支援,請使用輔助元素進行解決方法:
HTML
<div class="vcenter--container">
<div class="vcenter--helper">
<div class="vcenter--content">
<!--stuff-->
</div>
</div>
</div>
CSS
.vcenter--container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.vcenter--helper {
display: table-cell;
vertical-align: middle;
}
.vcenter--content {
margin: 0 auto;
width: 200px;
}
- 適用於動態高度元素
- 尊重內容流
- 舊版瀏覽器支援