1. 使用 Flexbox

特点：简单、直观，现代浏览器支持良好。
代码：

css

.parent {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 200px;           /* 父容器需有高度 */
}
.child {/* 子元素样式随意 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 实现简单，代码少。

• 动态适应子元素大小。 缺点：

• 兼容性稍差（IE9 及以下不支持）。

---

2. 使用 Grid

特点：类似 Flexbox，但更强大，适合复杂布局。
代码：

css

.parent {display: grid;place-items: center; /* 同时实现水平和垂直居中 */height: 200px;
}
.child {/* 子元素样式随意 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 语法简洁，功能强大。

• 支持二维布局。 缺点：

• 兼容性较 Flexbox 更差（IE11 需要前缀）。

---

3. 使用 position absolute 和 transform

特点：传统方法，兼容性好。
代码：

css

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

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 兼容性极佳（支持老旧浏览器）。

• 不依赖父元素具体宽高。 缺点：

• 需要知道子元素宽高变化时调整 transform。

• 代码稍复杂。

---

4. 使用 position absolute 和 margin auto

特点：需要固定子元素宽高。
代码：

css

.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px; /* 子元素需固定宽高 */height: 50px;
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 兼容性好。

• 不需要额外的计算。 缺点：

• 子元素必须有明确的宽高。

• 不够灵活。

---

5. 使用 position absolute 和计算偏移

特点：手动计算偏移量，适合固定尺寸场景。
代码：

css

.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 50%;left: 50%;width: 100px; /* 子元素需固定宽高 */height: 50px;margin-left: -50px; /* 宽度的一半 */margin-top: -25px;  /* 高度的一半 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 兼容性极好。

• 直观易懂。 缺点：

• 需要手动计算宽高偏移。

• 子元素尺寸变化时需调整。

---

6. 使用 table-cell

特点：利用表格特性，较老式方法。
代码：

css

.parent {display: table-cell;vertical-align: middle;text-align: center;height: 200px;width: 200px; /* 需要宽度 */
}
.child {display: inline-block;
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 兼容性好（支持老浏览器）。 缺点：

• 需要额外调整子元素为 inline-block。

• 不够现代化，维护性差。

---

7. 使用 line-height（单行文本居中）

特点：适合单行文本或简单内容。
代码：

css

.parent {height: 200px;line-height: 200px; /* 与高度一致 */text-align: center;
}
.child {display: inline-block;line-height: normal; /* 重置子元素行高 */
}

html

<div class="parent"><div class="child">内容</div>
</div>

优点：

• 简单，适合文本居中。 缺点：

• 只适用于单行内容，多行或复杂内容不适用。

---

总结对比

方法	优点	缺点	兼容性
Flexbox	简单、灵活	IE9+	较好
Grid	简洁、强大	IE11+（需前缀）	一般
position + transform	兼容性好、动态适应	代码稍复杂	极好
position + margin	兼容性好	需固定宽高	极好
position + 计算	直观、兼容性好	需手动计算	极好
table-cell	兼容老浏览器	不够现代	极好
line-height	简单（单行）	仅限单行内容	极好