CSS-元素居中

前言

“如何实现居中？”是前端开发中最经典的问题，也是面试中的必考题。根据元素类型（行内/块级）和容器环境的不同，选择最优的居中方式至关重要。本文将为你总结所有主流的居中方法。

一、 水平居中 (Horizontal Alignment)

方案	适用场景	核心代码
Flex 布局	最推荐，容器控制	父元素：display: flex; justify-content: center;
Margin 自动	固定宽度的块级元素	子元素：margin: 0 auto;
文本对齐	行内或行内块元素	父元素：text-align: center; 子元素：display: inline-block;
绝对定位	复杂定位场景	子元素：left: 50%; transform: translateX(-50%);

---

二、 垂直居中 (Vertical Alignment)

1. Flex 现代方案

父元素设置 display:flex、align-items: center，这是目前最简洁的垂直居中方式。

2. 绝对定位偏移

当子元素脱离文档流时使用：

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 修正拼写错误：translateY */
}

3. 表格单元格方案 (table-cell)

利用表格的对齐特性：

• 父元素：display: table-cell; vertical-align: middle;
• 注意：vertical-align 的居中取值是 middle 而非 center。

4. 单行文字垂直居中

• 技巧：设置 line-height 等于 height。
• 限制：仅适用于单行文本。

---

三、 水平垂直居中 (Perfect Centering)

1. Flex 终极方案（万能公式）

这是目前最常用的居中方式：

.parent {
  display: flex;
  justify-content: center; /* 水平 */
  align-items: center;     /* 垂直 */
}

2. 绝对定位 + Transform

不需要知道子元素的具体宽高即可实现：

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

3. Table-cell 组合拳

适用于需要兼容老旧浏览器的场景：

• 父元素：display: table-cell; vertical-align: middle; text-align: center;
• 子元素：display: inline-block;

---

四、 避坑指南与总结

1. Transform vs Margin：优先使用 transform 进行偏移，因为它不会触发浏览器的重排（Reflow），性能更佳。
2. 绝对定位的陷阱：使用绝对定位居中时，父元素必须设置 position: relative（或其他非 static 定位），否则子元素会相对于页面定位。