一行代码实现垂直居中

实现元素垂直居中的方案有很多，比如定位、伸缩盒子、行高等等。
但在 2024 年的Chrome 123 版本中， CSS 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。

如何使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test{align-content:center;height: 200px;background: red;}</style>
</head>
<body><div class="test">align-content我能垂直居中</div
</body>
</html>

在这里插入图片描述
如何能用

接下来，我们再看一下align-content这个属性的浏览器支持情况：
在这里插入图片描述
可以看到主流浏览器，现在绝大部分版本都是支持的，可以比较放心的使用

注意事项

1、由第一个例子可以看出，设置垂直居中，必须有设置对应的高度，居中方才生效，故此属性只针对块级元素和行内块元素生效，对行内元素不生效
2、在伸缩盒子中，设置此属性不生效，伸缩盒子中flex-wrap默认是nowrap属性，当设置了flex-wrap属性是nowrap时候，align-content属性不生效
如下图所示：
在这里插入图片描述