专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
今天看啥  ›  专栏  ›  前端早读课

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

前端早读课  · 公众号  · 前端  · 2024-11-08 08:00

主要观点总结

本文介绍了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 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览