日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

本文翻譯自 CSS finally adds vertical centering in 2024?，作者：James Smith， 略有刪改。

在 2024 年的 CSS 原生屬性中允許使用 1 個 CSS 屬性 align-content: center進行垂直居中。

<div style="align-content: center; height: 100px;">
  <code>align-content</code> 就是這么簡單！
</div>

支持情況：

CSS 對齊一般會使用 flexbox 或 grid 布局，因為 align-content 在默認的流式布局中不起作用。在 2024 年，瀏覽器實現了 align-content。

• 你不需要 flexbox 或 grid，只需要 1 個 CSS 屬性就可以進行對齊。
• 因此內容不需要包裹在 div 中。

<!-- 有效 -->
<div style="display: grid; align-content: center;">
  內容。
</div>

<!-- 失敗！-->
<div style="display: grid; align-content: center;">
  包含 <em>多個</em> 節點的內容。
</div>

<!-- 包裝div有效 -->
<div style="display: grid; align-content: center;">
  <div>  <!-- 額外的包裝器 -->
    包含 <em>多個</em> 節點的內容。
  </div>
</div>

<!-- 無需包裝div即可工作 -->
<div style="align-content: center;">
  包含 <em>多個</em> 節點的內容。
</div>

令人驚訝的是，經過幾十年的發展，CSS 終于有了 一個屬性 來控制垂直對齊！

垂直居中的歷史

瀏覽器很有趣，像對齊這樣的基本需求長期以來都沒有簡單的答案。以下是在瀏覽器中垂直居中的方法（水平居中是另一個話題）：

方法 1: 表格單元格

星級：★★★☆☆

有 4 種主要布局：流（默認）、表格、flexbox、grid。如何對齊取決于容器的布局。Flexbox 和 grid 相對較晚添加，所以表格是第一種方式。

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle;">
    內容。
  </div>
</div>

方法 2: 絕對定位

星級：☆☆☆☆☆

通過絕對定位間接的方式來實現這個效果。

<div style="position: relative;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    內容。
  </div>
</div>

這個方式通過絕對定位來繞過流式布局：

• 用 position: relative 標記參考容器。
• 用 position: absolute; top: 50% 將內容的邊緣放置在中心。
• 用 transform: translateY(-50%) 將內容中心偏移到邊緣。

方法 3: 內聯內容

星級：☆☆☆☆☆

雖然流布局對內容對齊沒有幫助。它允許在一行內進行垂直對齊。那么為什么不使一行和容器一樣高呢？

<div class="container">
  ::before
  <div class="content">內容。</div>
</div>

.container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

這個方式有一個缺陷，需要額外創建一個偽元素。

方法 4: 單行 flexbox

星級：★★★☆☆

現在布局中的 Flexbox 變得廣泛可用。它有兩種模式：單行和多行。在單行模式（默認）中，行填充垂直空間，align-items 對齊行內的內容。

<div style="display: flex; align-items: center;">
  <div>內容。</div>
</div>

或者調整行為列，并用 justify-content 對齊內容。

<div style="display: flex; flex-flow: column; justify-content: center;">
  <div>內容。</div>
</div>

方法 5: 多行 flexbox

星級：★★★☆☆

在多行 flexbox 中，行不再填充垂直空間，所以行（只有一個項目）可以用 align-content 對齊。

<div style="display: flex; flex-flow: row wrap; align-content: center;">
  <div>內容。</div>
</div>

方法 6: grid

星級：★★★★☆

Grid 出來的更晚，對齊變得更簡單。

<div style="display: grid; align-content: center;">
  <div>內容。</div>
</div>

方法 7: grid 單元格

星級：★★★★☆

注意與前一個方法的微妙區別：

• align-content 將單元格居中到容器。
• align-items 將內容居中到單元格，同時單元格拉伸以適應容器。

<div style="display: grid; align-items: center;">
  <div>內容。</div>
</div>

似乎有很多方法可以做同一件事。

方法 8: margin:auto

星級：★★★☆☆

在流布局中，margin:auto 可以水平居中，但不是垂直居中。使用 margin-block: auto 可以設置垂直居中。

<div style="display: grid;">
  <div style="margin-block: auto;">
    內容。
  </div>
</div>

方法 9: 這篇文章的開頭

星級：★★★★★

為什么瀏覽器最初沒有添加這個？

<div style="align-content: center;">
  <code>align-content</code> 就是這么簡單！
</div>

總結

CSS 的新特性 align-content 提供了一個簡單且直接的方式來實現垂直居中，無需使用額外的div包裝或復雜的布局模式即可完成垂直居中。但注意這個屬性還存在一定的瀏覽器兼容性，在線上使用需謹慎。

轉自https://juejin.cn/post/7408097468796551220