首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中body如何竖直居中

发布于 2024-11-11 19:23:05
0
7

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

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流