都2024年了，该用新的方法来实现css中的垂直居中啦！

最近，css新增了一个新的属性，来实现内容的垂直居中方法。那就是：
align-content: center;   没错，一行属性直接搞定！（不过得注意的是，这个属性还存在浏览器的兼容性，在上线前得多测试下哈！）

align-content: center;//实现垂直居中，注意：此属性支持Chrome:123,	Firefox: 125,Safari: 17.4版本

先上示意图：

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

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;
  }

 以上就是实现垂直居中的方法了（有的实现水平居中我也一并注释上去了，嗯，我就是这么热心肠），有新方法的话我还会继续补充。总之没有最好的方法，只有最符合自己项目需求的，要是看到这麻烦点个赞呗！