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”。