如何使 Div 在其父 Div 中垂直居中？

使Div 在父div 內垂直居中

使div 在其父div 內垂直居中可以透過多種方法實現，無需依賴特定元素尺寸。

表格版面配置（經典方法）

此方法利用表格版面配置和內聯區塊顯示屬性。

<div class="container">
  <div class="inner">
    ...
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

變換（現代方法）

轉換為垂直領域提供了更簡單的解決方案

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

Flexbox（首選現代方法）

Flexbox 提供了最直接的居中對齊方法。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

注意：

• 表格佈局方法得到了很好的支持，但可能會影響性能。
• Transform 和 Flexbox 提供了具有更強支援和易用性的現代解決方案。
• 無論表格的尺寸或內容如何，這些方法都可確保垂直居中內部 div。

以上是如何使 Div 在其父 Div 中垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！