欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

在 2024 年的 CSS 原生屬性中允許使用 1 個(gè) CSS 屬性 align-content: center進(jìn)行垂直居中。

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

支持情況：

CSS 對(duì)齊一般會(huì)使用 flexbox 或 grid 布局，因?yàn)?nbsp;align-content 在默認(rèn)的流式布局中不起作用。在 2024 年，瀏覽器實(shí)現(xiàn)了 align-content。

• 你不需要 flexbox 或 grid，只需要 1 個(gè) CSS 屬性就可以進(jìn)行對(duì)齊。
• 因此內(nèi)容不需要包裹在 div 中。

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

<!-- 失敗！-->
<div style="display: grid; align-content: center;">
  包含 <em>多個(gè)</em> 節(jié)點(diǎn)的內(nèi)容。
</div>

<!-- 包裝div有效 -->
<div style="display: grid; align-content: center;">
  <div>  <!-- 額外的包裝器 -->
    包含 <em>多個(gè)</em> 節(jié)點(diǎn)的內(nèi)容。
  </div>
</div>

<!-- 無(wú)需包裝div即可工作 -->
<div style="align-content: center;">
  包含 <em>多個(gè)</em> 節(jié)點(diǎn)的內(nèi)容。
</div>

令人驚訝的是，經(jīng)過幾十年的發(fā)展，CSS 終于有了 一個(gè)屬性 來(lái)控制垂直對(duì)齊！

垂直居中的歷史

瀏覽器很有趣，像對(duì)齊這樣的基本需求長(zhǎng)期以來(lái)都沒有簡(jiǎn)單的答案。以下是在瀏覽器中垂直居中的方法（水平居中是另一個(gè)話題）：

方法 1: 表格單元格

星級(jí)：★★★☆☆

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

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle;">
    內(nèi)容。
  </div>
</div>

方法 2: 絕對(duì)定位

星級(jí)：☆☆☆☆☆

通過絕對(duì)定位間接的方式來(lái)實(shí)現(xiàn)這個(gè)效果。

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

這個(gè)方式通過絕對(duì)定位來(lái)繞過流式布局：

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

方法 3: 內(nèi)聯(lián)內(nèi)容

星級(jí)：☆☆☆☆☆

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

<div class="container">
  ::before
  <div class="content">內(nèi)容。</div>
</div>

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

這個(gè)方式有一個(gè)缺陷，需要額外創(chuàng)建一個(gè)偽元素。

方法 4: 單行 flexbox

星級(jí)：★★★☆☆

現(xiàn)在布局中的 Flexbox 變得廣泛可用。它有兩種模式：?jiǎn)涡泻投嘈小Ｔ趩涡心Ｊ剑J(rèn)）中，行填充垂直空間，align-items 對(duì)齊行內(nèi)的內(nèi)容。

<div style="display: flex; align-items: center;">
  <div>內(nèi)容。</div>
</div>

或者調(diào)整行為列，并用 justify-content 對(duì)齊內(nèi)容。

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

方法 5: 多行 flexbox

星級(jí)：★★★☆☆

在多行 flexbox 中，行不再填充垂直空間，所以行（只有一個(gè)項(xiàng)目）可以用 align-content 對(duì)齊。

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

方法 6: grid

星級(jí)：★★★★☆

Grid 出來(lái)的更晚，對(duì)齊變得更簡(jiǎn)單。

<div style="display: grid; align-content: center;">
  <div>內(nèi)容。</div>
</div>

方法 7: grid 單元格

星級(jí)：★★★★☆

注意與前一個(gè)方法的微妙區(qū)別：

• align-content 將單元格居中到容器。
• align-items 將內(nèi)容居中到單元格，同時(shí)單元格拉伸以適應(yīng)容器。

<div style="display: grid; align-items: center;">
  <div>內(nèi)容。</div>
</div>

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

方法 8: margin:auto

星級(jí)：★★★☆☆

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

<div style="display: grid;">
  <div style="margin-block: auto;">
    內(nèi)容。
  </div>
</div>

方法 9: 這篇文章的開頭

星級(jí)：★★★★★

為什么瀏覽器最初沒有添加這個(gè)？

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

總結(jié)

CSS 的新特性 align-content 提供了一個(gè)簡(jiǎn)單且直接的方式來(lái)實(shí)現(xiàn)垂直居中，無(wú)需使用額外的div包裝或復(fù)雜的布局模式即可完成垂直居中。但注意這個(gè)屬性還存在一定的瀏覽器兼容性，在線上使用需謹(jǐn)慎。

轉(zhuǎn)自https://juejin.cn/post/7408097468796551220