CSS垂直居中的24种方法(最全最仔细)

在CSS中，垂直居中的方法有很多，具体的实现方式取决于布局的上下文（如是否有父容器、是否是块级元素、是否固定高度等）。以下是最全的CSS垂直居中方法：

1. 使用line-height (仅用于单行文本)

适用于单行文本，并且元素的高度已知。

div {
  height: 200px;
  line-height: 200px; /* line-height 设置为与容器高度相同 */
  text-align: center;
}

2. 使用vertical-align (用于行内元素)

对于行内元素或表格单元格。

span {
  vertical-align: middle;
}

如果是块级元素，可以将其转换为表格单元格。

div {
  display: table-cell;
  vertical-align: middle;
}

3. flexbox布局

最通用且灵活的方法之一，适用于各种场景。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可选 */
  height: 200px;
}

4. grid布局

使用CSS Grid也可以轻松实现居中。

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 200px;
}

5. 绝对定位加上负margin (已知宽高)

适用于已知宽高的元素。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 元素高度的一半 */
  margin-left: -50px; /* 元素宽度的一半 */
}

6. 绝对定位加上transform (未知宽高)

这种方法适用于任何元素，且不需要知道宽高。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7. 使用table布局

将父容器设置为表格，然后让子元素垂直居中。

.container {
  display: table;
  height: 200px;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

8. 使用padding (已知高度)

适用于已知高度的元素，通过增加内边距使内容居中。

div {
  height: 200px;
  padding-top: 50px; /* 父容器高度的一半 */
  padding-bottom: 50px;
  box-sizing: border-box; /* 确保 padding 不影响总高度 */
}

9. 使用position: relative + position: absolute

适用于相对和绝对定位的组合。

.container {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

10. writing-mode (仅限某些场景)

改变文字的书写模式来达到垂直居中的效果，适用于特殊场景。

div {
  writing-mode: vertical-lr;
  text-align: center;
  height: 200px;
}

11. flow-root（新兴方法）

结合block级元素的特殊性。

.container {
  display: flow-root;
}
.child {
  margin-block-start: auto;
  margin-block-end: auto;
}

12. object-fit (适用于图片或媒体元素)

当需要使图片或其他媒体元素在容器中垂直居中时可以使用。

img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

这些方法涵盖了从文本到块级元素、已知高度到未知高度、简单到复杂布局的多种垂直居中场景。
虽然上述方法涵盖了大部分常见的 CSS 垂直居中的实现，但还有一些特殊或不太常用的方式，适用于特定场景。以下是其他几种垂直居中的方法：

---

13. 使用flex的column方向

这是flex布局的变体，当你想让子元素按列排列时，可以通过flex-direction: column实现。

.container {
  display: flex;
  flex-direction: column; /* 让主轴变为竖直方向 */
  justify-content: center; /* 垂直居中 */
  height: 200px;
}

14. 多重transform (3D 变换)

使用 CSS3 的 3D 变换实现居中，可以应用于一些复杂场景。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0); /* 类似2D transform */
}

15. ex 单位结合 line-height

ex 单位是相对于字体的 x-height（即小写字母的高度），可以用来做更精细的文本居中控制。

div {
  font-size: 16px;
  line-height: 1ex;
  height: 10ex; /* 以字体高度为基础的容器 */
  text-align: center;
}

16. CSS Houdini（前沿技术）

CSS Houdini 是一项前沿技术，允许开发者通过 JavaScript 自定义浏览器的渲染方式。虽然它并不常用于垂直居中，但理论上可以通过自定义布局和绘制来实现完全自定义的居中效果。

17. 结合伪元素

通过伪元素来调整父容器的布局从而实现居中。

.container {
  position: relative;
}
.container::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

18. clip-path (裁剪路径)

clip-path 主要用于裁剪形状，虽然不常用，但也可以通过裁剪调整元素的居中位置，适合需要复杂裁剪的场景。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  clip-path: circle(50% at 50% 50%); /* 居中并裁剪圆形区域 */
}

19. CSS4的box-align (未来规范)

虽然还未完全支持，但未来 CSS4 中有新的对齐方法，例如box-align，能够提供更多的居中对齐选项。

.container {
  box-align: center;
  box-pack: center;
}

20. 使用svg布局

如果使用SVG来设计布局，可以通过<text>标签及其dy属性来进行垂直居中。

<svg height="100" width="300">
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">居中内容</text>
</svg>

21. min-height结合flex

通过min-height来确保最小高度，然后使用flex进行居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 视口高度的最小高度 */
}

22. aspect-ratio (宽高比)

aspect-ratio 可以在创建响应式设计时保持元素的宽高比，并通过内置的居中方式实现垂直居中。

.container {
  aspect-ratio: 1 / 1; /* 宽高比为1:1 */
  display: flex;
  justify-content: center;
  align-items: center;
}

23. text-orientation (仅适用于竖排文本)

适用于竖排文本布局时，结合writing-mode实现的另一种方法。

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
  height: 200px;
  text-align: center;
}

24. 使用JavaScript动态居中

在某些复杂布局中，可能需要使用JavaScript动态调整元素的位置来实现垂直居中。

const element = document.querySelector('.child');
element.style.position = 'absolute';
element.style.top = `${(window.innerHeight - element.offsetHeight) / 2}px`;

---

这些方法在不同场景中有不同的优劣，根据布局的需求和兼容性，选择最合适的方案才能高效地实现垂直居中。