css如何设置垂直居中

在css布局中，垂直居中是很多开发者经常需要处理的场景，不同元素类型和布局需求对应着不同的实现方案，下面介绍几种常用的实现方式。

单行文本垂直居中

如果是单行文本元素，只需要设置line-height等于父容器的高度，就可以实现垂直居中效果。

/* 父容器高度固定为100px */
.text-container {
    height: 100px;
    line-height: 100px;
    border: 1px solid #ccc;
}

<div class="text-container">
    这是单行文本内容
</div>

flexbox布局实现垂直居中

flexbox是现代布局中非常常用的方案，兼容性较好，适合大多数场景，只需要给父容器设置相关属性即可。

.flex-container {
    display: flex;
    /* 主轴方向默认是水平，align-items控制交叉轴对齐方式 */
    align-items: center;
    /* 如果需要同时水平居中，可以添加 justify-content: center */
    justify-content: center;
    height: 200px;
    border: 1px solid #ccc;
}

<div class="flex-container">
    <div class="inner-item">需要垂直居中的元素</div>
</div>

grid布局实现垂直居中

grid布局是更强大的二维布局方案，实现垂直居中更加简洁，适合支持较新浏览器的项目。

.grid-container {
    display: grid;
    /* place-items是align-items和justify-items的简写 */
    place-items: center;
    height: 200px;
    border: 1px solid #ccc;
}

<div class="grid-container">
    <div class="inner-item">需要垂直居中的元素</div>
</div>

绝对定位+transform实现垂直居中

如果元素尺寸未知，可以使用绝对定位结合transform属性实现垂直居中，兼容性也不错。

.position-container {
    position: relative;
    height: 200px;
    border: 1px solid #ccc;
}
.position-container .inner-item {
    position: absolute;
    top: 50%;
    /* translateY的-50%是相对于元素自身高度 */
    transform: translateY(-50%);
    /* 如果需要同时水平居中，可添加 left:50%; transform: translate(-50%, -50%); */
}

<div class="position-container">
    <div class="inner-item">需要垂直居中的元素</div>
</div>

表格布局实现垂直居中

如果需要兼容非常老的浏览器，可以使用表格布局的相关属性实现垂直居中。

.table-container {
    display: table;
    height: 200px;
    border: 1px solid #ccc;
}
.table-container .inner-item {
    display: table-cell;
    vertical-align: middle;
}

<div class="table-container">
    <div class="inner-item">需要垂直居中的元素</div>
</div>

不同方案适用场景对比

css垂直居中flexboxgrid修改时间：2026-06-22 10:54:44