【CSS垂直居中】在网页布局中，垂直居中是一个常见的需求。无论是文字、图片还是块级元素，如何实现垂直居中往往让人感到困惑。本文将总结几种常见的CSS垂直居中方法，并以表格形式进行对比说明。
一、常见垂直居中方法总结
| 方法名称 | 适用场景 | 实现方式 | 优点 | 缺点 |
| Flexbox 布局 | 父容器为块级元素 | `display: flex; align-items: center;` | 简洁、兼容性好 | 需要支持Flexbox的浏览器 |
| Grid 布局 | 父容器为块级元素 | `display: grid; align-items: center;` | 结构清晰、功能强大 | 兼容性略差于Flexbox |
| 行内元素（如文本） | 文本内容 | `line-height: 100px;` | 简单直接 | 仅适用于单行文本 |
| 绝对定位 + transform | 未知高度元素 | `position: absolute; top: 50%; transform: translateY(-50%);` | 灵活、通用性强 | 需要设置父容器为相对定位 |
| 表格单元格法 | 父容器为表格布局 | `display: table-cell; vertical-align: middle;` | 传统方法、兼容性好 | 不适合现代布局 |
二、使用建议
- 推荐使用 Flexbox 或 Grid：这两种方法是目前最主流的布局方式，简单且功能强大，适合大多数现代网页设计。
- 对于旧版浏览器：可考虑使用绝对定位结合 `transform` 或表格单元格法。
- 文本垂直居中：如果只是单行文本，可以使用 `line-height`，但若有多行文本，建议使用 Flexbox 或 Grid。
三、注意事项
- 使用 Flexbox 时，确保父容器设置了 `display: flex`。
- 在使用绝对定位时，父容器需要设置 `position: relative`。
- 不同浏览器对 CSS 的支持略有差异，建议使用浏览器兼容性工具测试。
通过以上方法，可以根据不同的布局需求选择合适的垂直居中方案。合理运用这些技术，可以让页面更加美观和易用。
