本文翻譯自 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>

支持情況:
Chrome: 123 | Firefox: 125 | Safari: 17.4 |
---|
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 style="display: grid; align-content: center;">
<div>
包含 <em>多個</em> 節點的內容。
</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
該文章在 2025/3/14 15:19:16 編輯過