CSS 常见水平垂直居中方案对比分析

1. Flexbox 布局

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

优点：

• 代码简洁，现代浏览器首选方案。
• 子元素尺寸未知时也能居中。
• 支持响应式布局。

缺点：

• 不支持 IE9 及以下版本。

---

2. Grid 布局

.parent {
  display: grid;
  place-items: center;  /* 合并水平垂直居中 */
}

优点：

• 代码极简，语义明确。
• 天然支持二维布局。

缺点：

• 兼容性较差（不支持 IE11 及以下）。

---

3. 绝对定位 + Transform

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

优点：

• 子元素尺寸无需固定。
• 兼容性较好（IE9+）。

缺点：

• 脱离文档流，可能影响父容器布局。
• transform 可能影响某些 CSS 属性（如 z-index）。

---

4. 绝对定位 + Margin Auto

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;  /* 需要明确宽度 */
  height: fit-content; /* 需要明确高度 */
}

优点：

• 兼容性好（IE8+）。

缺点：

• 子元素必须明确宽高（否则会铺满父容器）。

---

5. Table-Cell 布局

.parent {
  display: table-cell;
  vertical-align: middle;  /* 垂直居中 */
  text-align: center;      /* 水平居中 */
}
.child {
  display: inline-block;   /* 行内块元素 */
}

优点：

• 兼容性极好（IE8+）。

缺点：

• 父元素需固定宽高。
• 语义不直观，适用于传统布局。

---

6. Line-Height 单行文本居中

.parent {
  height: 200px;
  line-height: 200px;  /* 垂直居中（需等于父容器高度） */
  text-align: center;  /* 水平居中 */
}
.child {
  display: inline-block;
  line-height: normal; /* 重置子元素行高 */
}

优点：

• 简单快捷，适合单行文本。

缺点：

• 仅适用于单行文本或行内元素。
• 父容器必须明确高度。

---

7. CSS Writing-Mode

.parent {
  writing-mode: vertical-lr;  /* 改变布局方向 */
  text-align: center;
}
.child {
  writing-mode: horizontal-tb;
  margin: auto;
}

优点：

• 可实现特殊方向的居中。

缺点：

• 语义复杂，适用场景有限。

---

对比总结

方案	兼容性	是否需要子元素尺寸	是否脱离文档流	代码复杂度	适用场景
Flexbox	IE10+	否	否	低	现代布局，响应式
Grid	IE 不支持	否	否	极低	二维布局，现代项目
绝对定位+Transform	IE9+	否	是	中	未知尺寸元素
绝对定位+margin	IE8+	是	是	中	明确宽高的元素
Table-Cell	IE8+	否	否	中	传统布局，兼容性要求高
Line-Height	所有浏览器	父容器需明确高度	否	低	单行文本或行内元素
Writing-Mode	IE 部分支持	否	否	高	特殊方向布局

---

选择建议

1. 现代项目首选：优先使用 Flexbox 或 Grid，代码简洁且功能强大。
2. 兼容旧浏览器：使用 绝对定位+Transform 或 Table-Cell。
3. 已知子元素尺寸：绝对定位+margin 或 Line-Height。
4. 单行文本：直接使用 Line-Height 方案。