使用CSS实现垂直居中

最新推荐文章于 2025-04-18 20:43:03 发布

左岸16

最新推荐文章于 2025-04-18 20:43:03 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Phoebe_16/article/details/72808986

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了六种使用CSS实现元素垂直居中的方法，包括利用table-cell特性、flex布局、绝对定位结合负边距、绝对定位结合0、CSS3的translate变换及子元素margin:auto等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

垂直居中是页面布局中非常常见的效果，那怎么使用CSS实现垂直居中呢？

<div class="box">
    <span>实现垂直居中</span>
</div>

1.table-cell

.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

2.flex

.box {
    display: flex;
    justify-content: center;  /*设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
    align-items: center;  /*定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
}

3.使用绝对定位和负边距，需要设置元素的宽高

.box {
    position: relative;
}

.box span {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -50px;
    text-align: center;
}

4.绝对定位和0，需要确定内部元素的宽高，可以使用百分比，适用于移动端的设置

.box span {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

5.使用CSS3的平移translate

.box span {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

6.父元素使用flex，子元素使用margin: auto

.box {
    display: flex;
    text-align: center;
}

.box span {
    margin: auto;
}