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向上移动自身高度一半的距离,从而实现竖直居中。