切換語言為:簡體
CSS終於新增了垂直居中屬性「align-content」,僅這1 個 CSS 屬性實現垂直居中佈局

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

  • 爱糖宝
  • 2024-09-20
  • 2062
  • 0
  • 0

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

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

支援以下版本號的瀏覽器:
CSS終於新增了垂直居中屬性「align-content」,僅這1 個 CSS 屬性實現垂直居中佈局Chrome:123 | CSS終於新增了垂直居中屬性「align-content」,僅這1 個 CSS 屬性實現垂直居中佈局 Firefox:125 |  CSS終於新增了垂直居中屬性「align-content」,僅這1 個 CSS 屬性實現垂直居中佈局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 終於擁有了一個單一屬性 來控制垂直對齊!

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

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

CSS終於新增了垂直居中屬性「align-content」,僅這1 個 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>

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

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

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

  3. 使用 將內容中心偏移到邊緣 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


流動 彈性盒子 網格
  align-content 塊軸 橫軸(線) 塊軸(網格)
justify-content 沒有效果 主軸 內聯軸(網格)
  align-items 沒有效果 橫軸(專案) 塊軸(單元格)
justify-items 沒有效果 沒有效果 內聯軸(單元格)

背景:CSS 對齊

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

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

關於命名規則

從屬性名稱我們可以推斷出 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沒有效果。

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

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

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

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.