垂直對齊動態高度元素

直觀地應用 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;
}

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

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