从 Chrome 123 开始，您可以在块布局和表格布局中使用“CSS 框对齐”中的 align-content 属性。这样，无需创建弹性布局或网格布局，即可实现块方向对齐。不过，如果您在这些布局方法之外使用了 align-content，则可能需要更新 CSS，因为它现在生效。
浏览器支持
- 123
- 123
- 125
- 17.4
弹性布局和网格布局中的 align-content
您可能使用过 align-content 来对齐 Flex 项或网格轨道。在 Flex 布局中，对 flex 容器使用 align-content 属性在交叉轴上对齐 Flex 项目。在以下示例中，其值为 space-between，因此它将 Flex 容器中的可用空间分配到 Flex 行之间。
align-content 属性会将 Flex 项目的行隔开，因为 Flex 容器在横轴上有备用空间。使内容垂直居中
align-content 特别适用于使项在容器内垂直居中的情况。为此，请使用 display: flex 和 align-content: center。这会使项成为 flex 项，其他默认的 Flex 项行为也会生效。在以下示例中，标题通过 align-content: center 垂直居中，这会导致列表项缩小以适应内容，因此您需要将 flex-grow: 1 应用于列表项。
align-content 属性在灵活容器内使方向角垂直居中。借助适用于块布局的 align-content，您无需为属性创建灵活布局即可实现垂直对齐。无需其他属性，因为该项仍是块项，唯一的变化是对齐方式。
align-content 属性可让标题在块容器内垂直居中（需要 Chrome 123 或 Safari 17.4 或更高版本）。测试在块布局中对 align-content 的支持情况
遗憾的是，无法在块布局中测试对 align-content 的支持。由于 align-content 在 Flex 和网格布局中长期受支持，因此将功能查询与 @supports 搭配使用将始终返回 true。这与 Flexbox 中的 gap 属性的情况相同。CSS 工作组正在探索针对此类部分实现的解决方案。
检查您的网站是否存在不符合预期的对齐方式
在本规范中，align-content 属性多年来定义为适用于块布局。由于在这些环境之外没有任何浏览器支持 align-content，因此它没有任何作用。不过，如果您已将该属性添加到非 Flex 容器或网格容器，它将从 Chrome 123 开始生效。在您的 CSS 中搜索是否使用 align-content，并使用 Beta 版测试您的网站和应用（如果适合您）。