CSS finally adds vertical centering in 2024

August 24, 2024

翻译自：https://build-your-own.org/blog/20240813_css_vertical_center/

align-content 在 2024 年的默认布局中起作用，允许使用一个 CSS 属性进行垂直居中。

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

align-content 就是这么好用！

自何时起支持:
支持情况 Chrome: 123 | Firefox: 125 | Safari: 17.4

新功能

CSS 对齐的现状是 flexbox 或 grid，因为 align-content 在默认布局（流）中不起作用。在 2024 年，浏览器已经实现了 流布局 的 align-content。这有一些优势：

你不需要 flexbox 或 grid，只需要一个 CSS 属性来对齐。
因此，内容不需要包装在 div 中。

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

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

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

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

令人惊叹的是，CSS 经过几十年的发展，终于拥有了一个单个属性来控制垂直对齐！

垂直居中——历史

浏览器很有趣，像对齐这样的基本需求长期以来都没有简单的答案。以下是在 LibreOffice 中如何居中内容：

LibreOffice 居中

以下是在浏览器中如何进行垂直居中（水平居中是另一个主题）：

方法 1：表格单元格

心智：⭐️⭐️⭐️☆☆

有四种主要布局：流（默认）、表格、flexbox、grid。如何对齐内容取决于容器的布局。flexbox 和 grid 是比较晚才添加的，因此表格是第一个方法。

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

表格可以完全通过 CSS 创建，但很可惜需要这样的间接的方式。

方法 2：绝对定位

心智：☆☆☆☆☆

我很不理解。人们总是不断发明更多间接的方法。

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

此方法使用绝对定位来绕过布局，因为流布局对我们没有帮助：

用 position: relative 标记参考容器。
用 position: absolute; top: 50% 将内容的边缘放置在中心。
用 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

心智：⭐️⭐️⭐️☆☆

flexbox 在 Web 兴起后 20 年才广泛可用。它有两种模式：单行和多行。在单行模式（默认）下，一行会填满垂直空间，并且 align-items 会对齐行中的内容。

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

或者，将一行设置为列状，并使用 justify-content 对齐 items。

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

方法 5：多行 flexbox

心智：⭐️⭐️⭐️☆☆

在多行 flexbox 中，一行不再填满垂直空间，因此一行（只有一项）可以使用 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 中找到。

进入二维

是否有一个单个属性用于水平对齐？align-content 的对应项是什么？让我们看看各种对齐属性：

	flow	flexbox	grid
`align-content`	block axis	cross axis (line)	block axis (grid)
`justify-content`	no effect	main axis	inline axis (grid)
`align-items`	no effect	cross axis (item)	block axis (cell)
`justify-items`	no effect	no effect	inline axis (cell)

背景：CSS 轴术语

block 轴 通常是垂直的，而 inline 轴 是水平的。需要这些术语是因为vertical writing-mode 是存在的，因此block 轴和 inline 轴相对于文本方向。这类似于主轴和交叉轴相对于 flexbox items 方向。

关于命名事物

从属性名称可以推断出 CSS 的设计方式：

align-* 通常是垂直的，而 justify-* 通常是水平的。
*-content 和 *-items 控制不同级别的对象？

justify-content 是 align-content 的对应项，在网格布局中很方便，但在流布局中没有效果。place-content 简写可以同时设置这两个属性。

“Align”与“justify”

为什么“Align”和“justify”会在 CSS 中指的是轴？justify-* 是受文本对齐的启发吗？这很混乱，考虑到还有 text-align: justify。

通常情况下，当人们说“Align”时，他们的意思是单个对象的放置，而“justify”是指多个对象的分布。

虽然在 CSS 中，justify-* 和 align-* 都类似于文本对齐，因为它们接受诸如 space-between 之类的值；但它们只是表示不同的轴！

如何记忆：文本对齐是水平的，justify-* 也是如此。

“Content”与“items”

在 flexbox 中，“Content”和“items”令人困惑：

主轴：justify-content 控制 items，而 justify-items 没有效果。
交叉轴：单行模式和多行模式之间的差异。

结论：“items”用于可以单独对齐的东西。在主轴上，flex items 不能单独对齐，因此它是“Content”。

为什么 CSS 如此混乱？

即使忽略历史遗留问题，CSS 对于我们中的大多数人来说仍然过于混乱。它有数百种命名不佳的属性，每个属性都可能以不直观的方式影响结果。

软件项目失控

这是一个关于软件设计范例的案例研究：

Unix：正交、可组合的基本元素，可以独立地进行推理。
CSS（Central Software System）：只需用更多旋钮来修改软件。

早期的万维网只是链接文档。CSS 被用来样式化文档，而不考虑布局。随着时间的推移，CSS 获得了一些随机的布局功能，但没有连贯的愿景。

通常情况下，在 CSS 中有很多方法可以做某事，但却没有正确的功能来理智地完成它。这篇整个文章都是关于一个新功能，用于更理智地进行垂直对齐，而水平轴仍然不同。

相比之下，LibreOffice 遵循正交、可组合基本元素的范例：

对齐是统一的。垂直方向与水平方向没有区别。
统一的对齐之所以可能，是因为“Align”和“justify”是正交的，而不是混合在一起的。
- “Align”是容器的属性。
- “justify”是段落的属性。
“Align”和“justify”可以以任何方式组合。

←Back to home

This work is licensed under CC BY-NC-SA 4.0