2024 年 CSS 终于增加了垂直居中特性，效率翻倍！

主要观点总结

文章介绍了在Chrome 123版本中，CSS新增的align-content: center属性实现垂直居中的功能。文章内容包括该特性的优势、浏览器支持情况、使用注意事项以及与align-items:center的区别。

关键观点总结

关键观点1: CSS新特性align-content: center用于垂直居中

文章详细介绍了在Chrome 123版本中，CSS新增的align-content: center属性，该属性可以使普通块级元素实现垂直居中，而不再依赖于Flex布局或Grid布局。

关键观点2: 浏览器支持情况

文章提到了主流浏览器对align-content属性的支持情况，并提供了can i use网站的截图作为参考。

关键观点3: 使用align-content属性的注意事项

文章指出了使用align-content属性时需要注意的事项，包括行内元素不生效、在flex布局中需谨慎使用，并解释了为什么在某些情况下align-content属性不生效。

关键观点4: 与align-items:center的区别

文章提到了留一个思考题，即flex中垂直居中时，align-content:center与align-items:center有什么区别。

文章预览

在 2024 年的Chrome 123 版本中， CSS 原生可以使用  1 个 CSS 属性   align-content: center 进行垂直居中。 有何魅力？ 这个特性的魅力在哪儿呢？我举例给你看一下 < div   style = "align-content:center; height:200px; background: #614ef5;" >    < sapn > align-content sapn >  ：我能垂直居中！ div image.png 相信你也发现了，   align-content: center 属性实现垂直居中， 再也不需要依赖于 Flex 布局或者 Grid 布局了，它针对 普通块级 元素就生效，这就是它的魅力所在🔥！ 我能用吗？ 接下来，我们再看一下 align-content 这个属性的浏览器支持情况： 这是 can i use 网站的截图，可以看到主流浏览器， 现在绝大部分版本都是支持的，可以比较放心的使用😺 我要注意哪些坑？ 看看直接使用 align-content 有哪些注意点。 行内元素不生效 前面我提到了, align-content 针对普通块级元素生效， 什么意 ………………………………