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 | 简单（单行） | 仅限单行内容 | 极好 |
