在 2024 年的Chrome 123 版本中， css 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。

我们都知道align-content: center属性通常用于 Flexbox 布局中，它确保在多行的 flex 容器内的元素在垂直方向上居中排列。但是现在再也不需要依赖于Flex布局或者Grid布局了，它针对普通块级元素也能生效，这就是它的魅力所在！

兼容性

我们看一下align-content这个属性的浏览器支持情况：

这是can i use网站的截图，可以看到主流浏览器， 现在绝大部分版本都是支持的，可以比较放心的使用。

注意点

align-content针对普通块级元素生效，如果是行内元素display:inline;是不生效的，比如：

<div style="display:inline;align-content:center; height:100px;">
  垂直居中
</div

如果改成display:inline-block或block，才能有垂直居中效果。

其他垂垂直居中方式

在这里顺便我们来回顾下以前我们是如何实现内容的垂直居中的。

1.Flexbox（适用于父容器和子元素）

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
 // justify-content: center; /* 水平居中 */
}

2.Grid（适用于父容器和子元素）

.parent {
  display: grid;
  align-items: center;//垂直居中
  // place-items: center; // 垂直和水平上都居中
  //justify-items: center;//水平居中
}

3.使用line-height和vertical-align（适用于单行文本）

.parent {
  line-height: 100px; /* 高度 */
}
.child {
  vertical-align: middle;
  //text-align: center;//水平上居中
}

4.使用transform（适用于块级元素）

.parent {
  height: 200px; /* 父容器高度 */
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 
  //下面两个属性是实现在水平上也居中
  // left: 50%;
  // transform: translate(-50%, -50%);
}

5.使用table-cell和vertical-align（适用于单行文本） 

.parent {
  display: table-cell;
  vertical-align: middle;
 // text-align: center;//水平居中
}
.child {
  display: inline-block;
}

6.使用before和after伪元素（不常用）

.parent::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12712