文章介绍了在Chrome 123版本中，CSS新增的align-content: center属性实现垂直居中的功能。文章内容包括该特性的优势、浏览器支持情况、使用注意事项以及与align-items:center的区别。
文章详细介绍了在Chrome 123版本中，CSS新增的align-content: center属性，该属性可以使普通块级元素实现垂直居中，而不再依赖于Flex布局或Grid布局。
文章提到了主流浏览器对align-content属性的支持情况，并提供了can i use网站的截图作为参考。
文章指出了使用align-content属性时需要注意的事项，包括行内元素不生效、在flex布局中需谨慎使用，并解释了为什么在某些情况下align-content属性不生效。
文章提到了留一个思考题，即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-contentsapn> ：我能垂直居中！
div
image.png
相信你也发现了，
align-content: center
属性实现垂直居中， 再也不需要依赖于
Flex
布局或者
Grid
布局了，它针对
普通块级
元素就生效，这就是它的魅力所在🔥！
我能用吗？
接下来，我们再看一下
align-content
这个属性的浏览器支持情况：
这是
can i use
网站的截图，可以看到主流浏览器， 现在绝大部分版本都是支持的，可以比较放心的使用😺
我要注意哪些坑？
看看直接使用
align-content
有哪些注意点。
行内元素不生效
前面我提到了,
align-content
针对普通块级元素生效， 什么意思呢😵？我们看，下面这个代码就不生效
<div style="display:inline;align-content:center; height:200px; background: #614ef5;">
<span>align-contentsapn> ：我能垂直居中！
div
image.png
如果改成
display:inline-block
是有效果的：
image.png
其实就是
inline
行内元素不生效！
flex布局要小心
接着改为flex布局
display:flex
， 发现
align-content:center
没有生效。这是为什么呢？你前面不是说原来
align-content
数据依赖Flex布局才起作用吗，为什么我改成Flex布局反而不生效了呢
带着这个疑问往下看↓
image.png
找到不生效的css样式，浏览器已经给了提示， 意思就是
align-content:center
这个属性在
flex-wrap:no-wrap
中不生效，那我们再增加几个元素来试一下：
<style>
.box{
display:flex;
align-content:center;
height:200px;
background: #dcd7ff;
}
.box span{
width:46px;
height:46px;
background-color:#9181ff;
border-radius:4px;
margin-left:10px;
}
.box2{
margin-top:20px;
flex-wrap:wrap;
}
style>
<div class="box">
<span>我span
