CSS实现垂直居中的几种实用方法

使用 Flexbox 实现垂直居中

现在最常用也最方便的方法就是 Flexbox。比如你有个卡片区域，想让里面的文字或图标上下左右都居中，直接给父容器加上这几个属性就行：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 300px;          /* 需要固定高度才能看出效果 */
}

这样一来，不管里面内容多少，都会稳稳地卡在正中间。这种写法在移动端和响应式布局里特别好用。

通过绝对定位 + transform 居中

如果你不能改变布局模式，比如父元素已经是 position: relative 了，可以用绝对定位配合 transform 来实现。这种方法兼容性也不错，适合老项目维护时使用。

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里的关键是 transform 的百分比是相对于自身尺寸计算的，所以能精准回退一半宽度和高度，达到真正的居中。

用 table-cell 模拟表格行为

这个方法可能有点冷门，但在某些场景下很管用。比如你想让一段文本在一个固定区域里垂直居中，又不想动结构，可以试试把块级元素变成表格单元格。

.box {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  text-align: center;
}

注意它不支持 margin: auto，但对纯内容居中足够用了。不过子元素如果是块级，记得控制宽度，否则容易撑开。

行高法只适用于单行文本

如果只是让一行文字在按钮或者导航栏里垂直居中，最简单的还是 line-height。比如一个 40px 高的按钮，设置 line-height 也为 40px 就行了。

.btn {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

这招简单粗暴，但只适合单行内容。一旦换行，文字就会叠在一起，体验很差。

CSS Grid 也能轻松搞定

Grid 布局虽然用得不如 Flex 多，但它同样能优雅地完成垂直居中任务。尤其是你要做二维布局的时候，Grid 更有优势。

.grid-container {
  display: grid;
  place-items: center; /* 水平+垂直一起居中 */
  height: 300px;
}

或者分开写：

.grid-container {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 300px;
}

跟 Flex 很像，但更适合复杂网格场景，比如九宫格之类的布局。