【第3412期】CSS 终于在 2024 年添加了垂直居中功能

主要观点总结

本文介绍了CSS在2024年引入的align-content属性，使得在默认布局中实现垂直居中成为可能。文章详细描述了各种实现垂直居中的方法，并探讨了CSS布局的现状和存在的问题，如命名混乱和属性过多。文章还通过对比LibreOffice的对齐方式，提出了对CSS对齐属性的思考。

关键观点总结

关键观点1: CSS在2024年引入的align-content属性使得默认布局中实现垂直居中对齐成为可能。

此前实现垂直居中的方法包括使用表格布局、弹性布局和网格布局等，但都存在一些缺点。align-content属性的出现简化了垂直居中的实现方式。

关键观点2: CSS布局的现状是存在命名混乱和属性过多的问题。

由于历史遗留问题和缺乏连贯的愿景，CSS中存在着各种命名不佳和互相影响的属性，使得学习和使用变得困难。

关键观点3: LibreOffice的对齐方式遵循正交、可组合的基本原则。

LibreOffice中的对齐和居中属性是相互独立的，而不是混在一起的。这种设计方式使得对齐方式更加统一和易于理解。

关键观点4: 文章提出了对CSS对齐属性的思考。

作者通过对比LibreOffice的对齐方式，提出了对CSS对齐属性的思考，呼吁CSS设计更加遵循正交、可组合的原则，减少命名混乱和属性过多的情况。

文章预览

前言 CSS 在 2024 年终于引入了 align-content 属性，使得在默认布局（流布局）中实现垂直居中变得可能，不再需要依赖于 flexbox 或 grid 布局。今日前端早读课文章由 @飘飘翻译分享。 正文从这开始～～ 在 2024 年的默认布局中，  align-content  只需使用一个 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，因为  align-content  在默认布局 (流) 中不起作用。到 2024 年，浏览器将实现  align-content  用于流布局。这有一些优点： 你不需要使用 flexbox 或 grid，只需要一个 CSS 属性来进行对齐即可。 因此，内容不需要包裹在 div 标签中。 < div style = " display : grid; align-content : center;" > Content. d ………………………………