css垂直居中的方法有哪些

在前端页面布局中，元素垂直居中是高频需求，不同场景下的实现方案存在差异，下面介绍几种常用的css垂直居中方法。

单行文本垂直居中

如果是单行文本元素，只需要设置line-height等于父容器的高度即可实现垂直居中，这种方式实现简单，兼容性也很好。

/* 父容器高度固定为100px */
.parent {
    height: 100px;
    border: 1px solid #ccc;
}
/* 单行文本设置行高等于父容器高度 */
.child {
    line-height: 100px;
    text-align: center; /* 同时实现水平居中 */
}

使用vertical-align实现垂直居中

对于行内块元素，可以借助vertical-align: middle属性实现垂直居中，需要配合父容器的line-height属性使用。

.parent {
    height: 200px;
    line-height: 200px; /* 父容器行高等于高度 */
    border: 1px solid #ccc;
}
.child {
    display: inline-block;
    vertical-align: middle; /* 垂直居中对齐 */
    line-height: normal; /* 重置子元素行高，避免继承父容器的行高 */
}

使用position定位实现垂直居中

已知子元素尺寸的情况

如果子元素的宽高已知，可以通过绝对定位配合负margin的方式实现垂直居中。

.parent {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 80px;
    margin-top: -40px; /* 高度的一半，向上偏移 */
    margin-left: -50px; /* 宽度的一半，向左偏移 */
    background: #f0f0f0;
}

未知子元素尺寸的情况

如果子元素尺寸未知，可以使用transform: translate(-50%, -50%)替代负margin，无需知道具体尺寸也能实现居中。

.parent {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 自身宽高的一半偏移 */
    background: #f0f0f0;
}

使用flexbox弹性布局实现垂直居中

flexbox是目前最常用的布局方案，实现垂直居中非常简单，只需要给父容器设置对应的flex属性即可，兼容性也覆盖了大部分现代浏览器。

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    background: #f0f0f0;
}

使用grid网格布局实现垂直居中

grid布局同样可以轻松实现垂直居中，代码更加简洁，适合现代浏览器项目使用。

.parent {
    display: grid;
    place-items: center; /* 同时实现水平和垂直居中 */
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    background: #f0f0f0;
}

不同方案适用场景对比

下面是各垂直居中方案的适用场景对比，方便开发者选择：

cssvertical_alignflexboxgridposition修改时间：2026-06-29 10:39:24