CSS垂直居中：8种常用方法及其适用场景详解

在CSS中实现垂直居中是一个常见但有时颇具挑战性的任务。以下是8种常用的解决方案及其适用场景的对比：

1. Flexbox 布局：

   • 方法：使用 display: flex; align-items: center; justify-content: center;。
   • 适用场景：现代布局中最常用的方法，适用于大多数情况，尤其是当容器和子元素的大小未知或动态变化时。

2. Grid 布局：

   • 方法：使用 display: grid; place-items: center;。
   • 适用场景：适用于需要同时控制行和列的布局，适合复杂的布局需求。

3. 绝对定位 + 负边距：

   • 方法：子元素使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。
   • 适用场景：适用于已知子元素尺寸的情况，且父元素需要相对或绝对定位。

4. 表格布局：

   • 方法：父元素使用 display: table;，子元素使用 display: table-cell; vertical-align: middle;。
   • 适用场景：适用于需要兼容旧版浏览器的场景，但现代开发中较少使用。

5. 行高（Line Height）：

   • 方法：父元素设置 line-height 等于其高度，子元素为 inline 或 inline-block。
   • 适用场景：适用于单行文本的垂直居中，简单且有效。

6. 伪元素法：

   • 方法：父元素使用伪元素 ::before 或 ::after 设置 height: 100%; vertical-align: middle;，子元素设置为 inline-block; vertical-align: middle;。
   • 适用场景：适用于需要兼容旧版浏览器的场景，且子元素为 inline-block。

7. CSS 计算：

   • 方法：使用 calc() 函数动态计算 top 或 margin-top 的值。
   • 适用场景：适用于已知父元素和子元素高度的情况，且需要精确控制位置。

8. 视口单位（Viewport Units）：

   • 方法：使用 vh 单位，如 margin-top: calc(50vh - (子元素高度 / 2));。
   • 适用场景：适用于全屏或视口相关的布局，如弹窗或全屏背景。

每种方法都有其特定的使用场景和优缺点。选择合适的方法需要考虑项目的兼容性要求、布局复杂度以及维护成本。在现代Web开发中，Flexbox 和 Grid 布局因其强大的功能和简洁的语法而成为首选。