垂直對齊動態高度元素

直觀地應用 css 不會產生預期的結果,因為

要獲得最廣泛的瀏覽器支援,請使用輔助元素進行解決方法:

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;
}

來自原始問題的 jsfiddle 。這種方法

  • 適用於動態高度元素
  • 尊重內容流
  • 舊版瀏覽器支援