如何在 CSS 中垂直居中元素？

使用 CSS 技術將元素垂直居中

可以使用各種 CSS 方法來實現 div 中元素的垂直居中。以下是兩種常見的方法：

Flexbox 方法

Flexbox 提供了一個多功能的佈局系統，允許靈活的項目對齊。若要使用 Flexbox 垂直居中元素，請依照下列步驟操作：

1. 使用 display: flex 將父容器設定為具有 Flex 顯示。
2. 指定列的 Flex 方向來堆疊元素垂直。
3. 使用 justify-content: center 垂直對齊項目。

例如，這是使用Flexbox 的CSS 片段：

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

表格和定位方法

此方法利用表格顯示與定位：

1. 設定body為display:table建立類似表格結構。
2. 設定父容器顯示：table-cell 和vertical-align: middle 以垂直對齊內容。
3. 使用 margin: 0 auto 將元素置中。

這是此方法的 CSS 程式碼：

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

哪一種方法選擇？

Flexbox 通常是首選，因為它簡單、有效率且佈局選項廣泛。不過，如果擔心對舊版瀏覽器的支持，可以採用表格和定位方式。

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