CSS終於新增了垂直居中屬性「align-content」，僅這1 個 CSS 屬性實現垂直居中佈局

align-content 2024 年在預設佈局中工作，允許使用1 個 CSS 屬性進行垂直居中。

<div style="align-content: center; height: 100px;">
  <code>align-content</code> just works!
</div>

支援以下版本號的瀏覽器：
Chrome：123 |  Firefox：125 |  Safari：17.4

有什麼新變化？

CSS 對齊的現狀是切換到flexbox或 grid ，因為在預設佈局（ flowalign-content ）中不起作用。 2024 年，瀏覽器已實現flow佈局。 這有一些優點： align-content

• 您不需要 flexbox 或 grid，只需要 1 個 CSS 屬性進行對齊。

• 因此，內容不需要包裹在 div 中。

<!-- Works -->
<div style="display: grid; align-content: center; ">
  Content.
</div>

<!-- FAIL! -->
<div style="display: grid; align-content: center; ">
  Content with <em>multiple</em> nodes.
</div>

<!-- Works with the content wrapper -->
<div style="display: grid; align-content: center; ">
  <div>  <!-- The extra wrapper -->
    Content with <em>multiple</em> nodes.
  </div>
</div>

<!-- Works without the content wrapper -->
<div style="align-content: center; ">
  Content with <em>multiple</em> nodes.
</div>

讓人激動！經過幾十年的發展，CSS 終於擁有了一個單一屬性 來控制垂直對齊！

歷史——老前端們要如何搞定垂直居中需求

瀏覽器很碎片化，像元素對齊這樣的基本需求很長時間都沒有簡單的答案。以下是老前端如何垂直居中內容：

以下是如何在瀏覽器中垂直居中（ 水平居中是另一個主題）：

方法一：表格單元格

推薦度：★★★☆☆

有 4 種主要佈局：流式佈局（預設）、表格佈局、彈性框佈局、網格佈局。如何對齊內容取決於容器的佈局。彈性框佈局和網格佈局新增得比較晚，因此表格佈局是首選。

<div style="display: table; ">
  <div style="display: table-cell; vertical-align: middle; ">
    Content.
  </div>
</div>

可以僅透過 CSS 來呼叫表格，但遺憾的是需要這樣的間接方式。

方法二：絕對定位

推薦度：☆☆☆☆☆

我不知道為什麼。人們不斷髮明更間接的做事方法。

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

這個使用絕對定位來繞過佈局，因為流佈局對我們沒有幫助：

0. 將參考容器標記為 position: relative。

1. 使用 將內容的邊緣放置在中心 position: absolute; top: 50%。

2. 使用 將內容中心偏移到邊緣 transform: translateY(-50%)。

方法 3：內聯內容

推薦度：☆☆☆☆☆

雖然流式佈局對內容對齊沒有幫助。但它允許在一行內垂直對齊。那麼為什麼不讓一行和容器一樣高呢？

<div class="container">
  ::before
  <div class="content">Content.</div>
</div>

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

這有一些缺陷：除了犧牲一個偽元素之外，開頭還有一個零寬度的“支柱”字元，可能會弄亂東西。

方法 4：單行 flexbox

推薦度：★★★☆☆

在 Web 興起 20 年後，Flexbox 纔開始廣泛使用。它有兩種模式：單行和多行。在單行模式（預設）下，行會填充垂直空間，並 align-items對齊行內的內容。

<div style="display: flex; align-items: center; ">
  <div>Content.</div>
</div>

或者，使線條呈柱狀，並用 對齊專案 justify-content。

<div style="display: flex; flex-flow: column; justify-content: center; ">
  <div>Content.</div>
</div>

方法 5：多行 flexbox

推薦度：★★★☆☆

在多行彈性框中，行不再填充垂直空間，因此行（其中只有 1 個專案）可以與 對齊 align-content。

<div style="display: flex; flex-flow: row wrap; align-content: center; ">
  <div>Content.</div>
</div>

方法 6：網格內容

推薦度：★★★★☆

網格出現得更晚。對齊變得更簡單。

<div style="display: grid; align-content: center; ">
  <div>Content.</div>
</div>

方法 7：網格單元

推薦度：★★★★☆

請注意與前一個的細微差別：

• align-content將單元格置於 容器的中心。

• align-items將內容置於 單元格的中心，同時單元格伸展以適合 容器。

<div style="display: grid; align-items: center; ">
  <div>Content.</div>
</div>

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

方法 8：自動邊距

推薦度：★★★☆☆

在流式佈局中，margin:auto水平居中，但不垂直居中。 Flexbox 和 grid 不存在這種荒謬的情況。

<div style="display: grid; ">
  <div style="margin-block: auto; ">
    Content.
  </div>
</div>

不過，我還是不明白為什麼設計邊距是爲了控制對齊。

方法 9：2024 年的新方法

推薦度：★★★★★

為什麼瀏覽器一開始不新增這個功能？

<div style="align-content: center; ">
  <code>align-content</code> just works!
</div>

與此方法一樣，方法 1中的表格單元格也不需要內容包裝器（但它需要表格包裝器）。我們又回到原點了！

概括

所有垂直居中方法都在這個codepen中。如果知道你知道其他方法，記得評論留言哈。

關於CSS 對齊的一些延伸思考

水平對齊是否有一個屬性 ？ 對應的屬性是什麼？ 讓我們來看看各種對齊屬性：**align-content

背景：CSS 對齊

塊軸通常是垂直的，而 行內軸是水平的。這些術語是必需的，因為垂直 writing-mode是一個東西，所以塊軸和行內軸是相對於文字方向的。這類似於主軸和橫軸相對於彈性框專案方向的方式。

關於命名規則

從屬性名稱我們可以推斷出 CSS 是如何設計的：

• align-*多為垂直方向，而 justify-*多為水平方向。

• *-content並*-items控制不同級別的物件？

justify-content是 的對應項 align-content，在網格佈局中很方便，但在流式佈局中無效。place-content 簡寫設定兩者。

“align）”與“justify”

為什麼“align”和“justify”在 CSS 中對齊方式不一樣？是 justify-*受文字對齊啓發嗎？這很混亂，因為我們還用到：text-align: justify

通常人們說的“對齊”是指單個物件的放置，而“對齊”是指多個物件的 分佈。

而在 CSS 中，justify-*和都align-* 類似於文字對齊，因為它們接受像這樣的值 space-between；它們只是意味著不同對齊物件！

記憶方法：文字對齊是水平的，也是justify-*。

content 與 item

在 flexbox 中，“content” 和 “items” 容易讓人混淆：

• 主軸：justify-content控制物品，但 justify-items沒有效果。

• 交叉軸：單線和多線模式的區別。

結論：“items” 指的是可以 單獨對齊的內容 。在主軸上，彈性專案無法單獨對齊，因此它屬於“content”。