css中body如何竖直居中

CSS中让body竖直居中可以通过以下两种方式实现：

 body {
    display: flex;
    justify-content: center;
    align-items: center;
  } 

这里先使用了flex布局，然后通过justify-content和align-items两个属性分别定义了主轴和交叉轴的对齐方式，从而实现了竖直居中。

 body {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  } 

这种方式使用了绝对定位，将body定位在页面中间的垂直位置。然后通过translateY属性来实现将body向上移动自身高度一半的距离，从而实现竖直居中。