如何使用CSS实现元素垂直居中布局？

在CSS布局中，实现元素的垂直居中是前端开发经常遇到的问题。无论是弹窗内容对齐、卡片内部排版，还是页面整体布局，垂直居中都能让界面更协调。下面介绍几种主流实现方式。

使用Flexbox实现垂直居中

Flexbox是现代CSS布局中最常用的方式，只需在父容器上设置相关属性即可让子元素垂直居中。

/* 父容器使用flex布局，并让子项在交叉轴上居中 */
.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可选 */
  height: 200px;
}
.child {
  width: 100px;
  height: 50px;
  background: #eee;
}

使用绝对定位与transform

如果项目需要兼容较老浏览器，可以用绝对定位配合transform来实现，不依赖flex特性。

/* 父容器相对定位，子元素绝对定位并偏移自身一半 */
.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background: #ddd;
}

使用表格布局方式

将父元素显示为表格单元格，再利用vertical-align属性完成垂直居中，写法直观但语义稍弱。

/* 模拟表格单元格的垂直对齐 */
.parent {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
  width: 300px;
}
.child {
  width: 100px;
  height: 50px;
  background: #ccc;
}

方法对比

小结

实际开发中推荐优先使用flexbox来完成垂直居中，代码简洁且易于维护。若面对特殊兼容需求，再考虑定位或表格方案。

CSS垂直居中flexbox修改时间：2026-07-26 23:30:14