CSS 垂直居中完全指南：6种方法深度解析

1. Flexbox：现代化的完美解决方案

Flexbox 是当今最推荐的垂直居中方法，简洁且功能强大。只需三行 CSS 即可实现完美居中。

核心优势：

• 语法简单，易于理解
• 自动适应内容尺寸
• 支持多个子元素居中
• 现代浏览器兼容性好

2. Position + Transform：精确定位方案

这种方法通过 绝对定位 + CSS 变换 实现居中，适用于需要精确控制元素位置的场景。

适用场景：

• 复杂布局中的浮层
• 模态框和弹窗
• 需要脱离文档流的元素

3. CSS Grid：网格布局的优雅方案

CSS Grid 提供了 最简洁的居中语法，一行代码即可搞定。特别适合现代网页布局。

Grid 优势：

• 语法极其简洁
• 二维布局能力强
• 可同时处理多个子元素
• 响应式支持优秀

4. 方法对比：交互式选择器

每种方法都有其独特的优势，选择哪种方法取决于具体的使用场景。通过下面的交互演示，你可以实时对比不同方法的效果。

5. Table Cell：经典的表格单元格方法

利用 表格单元格的特性 实现垂直居中，这是一个历史悠久但依然有效的方法。

适用场景：

• 需要兼容旧版浏览器
• 内容高度未知的情况
• 文本内容的垂直居中

6. Line Height：单行文本的快速方案

通过设置 行高等于容器高度 来实现单行文本的垂直居中，简单高效。

使用限制：

• 仅适用于单行文本
• 内容高度必须已知
• 不适合复杂元素

7. 实用代码片段集合

以下是各种方法的完整代码片段，你可以直接复制使用：

快速 Flexbox 居中：

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

响应式 Grid 居中：

.grid-center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

万能绝对定位居中：

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

表格单元格居中：

.table-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100vw;
  height: 100vh;
}

伪元素辅助居中：

.pseudo-center {
  text-align: center;
  height: 100vh;
}

.pseudo-center::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.pseudo-center > * {
  display: inline-block;
  vertical-align: middle;
}

方法选择指南

选择合适的垂直居中方法时，请考虑以下因素：

推荐优先级：

1. Flexbox - 首选方案，适用于大部分现代项目
2. CSS Grid - 适合网格布局，语法最简洁
3. Position + Transform - 适合需要脱离文档流的场景
4. Table Cell - 兼容性最好，适合老项目
5. Line Height - 仅适用于单行文本
6. 伪元素 - 特殊场景的备选方案

浏览器兼容性考虑：

• Flexbox：IE10+
• Grid：IE10+（需前缀）
• Transform：IE9+
• Table Cell：所有浏览器

性能考虑：

• Flexbox 和 Grid 的性能最佳
• Transform 可能触发重排
• Table Cell 对复杂布局性能影响较大