样式垂直居中，谁才是王者

面试官 常问如何让元素垂直居中，这其实是个经典的前端问题。

实现垂直居中的方法多种多样，从传统的表格布局到现代的Flexbox、Grid布局，再到绝对定位配合transform，甚至是line-height技巧，每种方法都有其适用场景。今天，小编就来总结一下这些实现垂直居中的方法，帮助大家更好地应对面试，掌握前端布局的核心技能。

文章目录

样式垂直居中，谁才是王者
- [1. 使用Flexbox实现垂直居中](#1. 使用Flexbox实现垂直居中)
- [2. 使用Grid布局实现垂直居中](#2. 使用Grid布局实现垂直居中)
- [3. 使用绝对定位和transform实现垂直居中](#3. 使用绝对定位和transform实现垂直居中)
- [4. 使用line-height实现垂直居中（适用于单行文本）](#4. 使用line-height实现垂直居中（适用于单行文本）)
- [5. 使用表格布局实现垂直居中](#5. 使用表格布局实现垂直居中)
- [6. 使用伪元素和inline-block实现垂直居中](#6. 使用伪元素和inline-block实现垂直居中)
- [7. 使用flex-grow和margin实现垂直居中（适用于flex容器中的多个子元素）](#7. 使用flex-grow和margin实现垂直居中（适用于flex容器中的多个子元素）)
- [8. 使用CSS变量和calc实现动态垂直居中](#8. 使用CSS变量和calc实现动态垂直居中)
- 对比表格
- 面试最优选择

1. 使用Flexbox实现垂直居中

Flexbox是CSS3中引入的一种强大布局方式，它使得实现垂直居中变得异常简单。

代码案例：

html 复制代码

<div class="flex-container">
  <div class="flex-item">垂直居中</div>
</div>

css 复制代码

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 300px; /* 容器高度 */
  border: 1px solid #ccc;
}
.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

2. 使用Grid布局实现垂直居中

CSS Grid布局是另一种强大的布局工具，它同样能够轻松实现元素的垂直居中。

代码案例：

html 复制代码

<div class="grid-container">
  <div class="grid-item">垂直居中</div>
</div>

css 复制代码

.grid-container {
  display: grid;
  place-items: center; /* 垂直及水平居中 */
  height: 300px;
  border: 1px solid #ccc;
}
.grid-item {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

3. 使用绝对定位和transform实现垂直居中

绝对定位和transform属性的结合使用，可以实现非常精确的垂直居中效果。

代码案例：

html 复制代码

<div class="abs-container">
  <div class="abs-item">垂直居中</div>
</div>

css 复制代码

.abs-container {
  position: relative;
  height: 300px;
  border: 1px solid #ccc;
}
.abs-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

4. 使用line-height实现垂直居中（适用于单行文本）

对于单行文本，可以通过设置line-height等于容器高度来实现垂直居中。

代码案例：

html 复制代码

<div class="line-height-container">
  <span class="line-height-item">垂直居中</span>
</div>

css 复制代码

.line-height-container {
  height: 300px;
  line-height: 300px; /* 垂直居中 */
  text-align: center; /* 水平居中 */
  border: 1px solid #ccc;
}
.line-height-item {
  display: inline-block;
  vertical-align: middle;
  background-color: lightyellow;
}

5. 使用表格布局实现垂直居中

虽然表格布局已经不再是主流，但在某些特定情况下仍然可以使用它来实现垂直居中。

代码案例：

html 复制代码

<table class="table-container">
  <tr>
    <td class="table-item">垂直居中</td>
  </tr>
</table>

css 复制代码

.table-container {
  width: 100%;
  height: 300px;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.table-item {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  background-color: lightpink;
}

6. 使用伪元素和inline-block实现垂直居中

通过伪元素和inline-block的结合，也可以实现垂直居中的效果。

代码案例：

html 复制代码

<div class="pseudo-container">
  <div class="pseudo-item">垂直居中</div>
</div>

css 复制代码

.pseudo-container {
  height: 300px;
  text-align: center;
  border: 1px solid #ccc;
  position: relative;
}
.pseudo-container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.pseudo-item {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-color: lightsalmon;
}

7. 使用flex-grow和margin实现垂直居中（适用于flex容器中的多个子元素）

当flex容器中有多个子元素时，可以通过flex-grow和margin的结合来实现垂直居中。

代码案例：

html 复制代码

<div class="flex-grow-container">
  <div class="flex-grow-item">垂直居中1</div>
  <div class="flex-grow-item">垂直居中2</div>
</div>

css 复制代码

.flex-grow-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  height: 300px;
  border: 1px solid #ccc;
}
.flex-grow-item {
  margin: 10px 0; /* 为了展示效果，给子元素一些上下边距 */
  width: 100px;
  height: 50px;
  background-color: lightseagreen;
}

（注：此方法更适用于flex容器中的多个子元素在垂直方向上的居中，若只有单个子元素，则直接使用align-items: center即可。）

8. 使用CSS变量和calc实现动态垂直居中

在某些需要动态调整的情况下，可以使用CSS变量和calc函数来实现垂直居中。

代码案例（假设容器高度动态变化）：

html 复制代码

<div class="dynamic-container" style="height: 400px;"> <!-- 动态高度 -->
  <div class="dynamic-item">垂直居中</div>
</div>

css 复制代码

:root {
  --container-height: 300px; /* 初始容器高度，可动态修改 */
}
.dynamic-container {
  height: var(--container-height); /* 使用CSS变量设置高度 */
  position: relative;
  border: 1px solid #ccc;
}
.dynamic-item {
  position: absolute;
  top: calc(50% - 50px); /* 50px为子元素高度的一半，实现垂直居中 */
  width: 100px;
  height: 100px;
  background-color: lightsteelblue;
}

（注：在实际应用中，若容器高度动态变化，可能需要通过JavaScript动态更新CSS变量的值。）

对比表格

方法	兼容性	灵活性	适用场景
Flexbox	好	高	各种布局场景
Grid布局	好	高	各种布局场景
绝对定位+transform	好	高	需要精确控制的场景
line-height	好	低	单行文本垂直居中
表格布局	一般	低	特定布局需求
伪元素+inline-block	好	中	需要兼容老旧浏览器的场景
flex-grow+margin	好	中	flex容器中的多个子元素垂直居中
CSS变量+calc	好	高	需要动态调整的场景

面试最优选择

综合以上各种方法，Flexbox和Grid布局无疑是最灵活且兼容性好的选择。对于大多数布局场景，它们都能够轻松实现垂直居中，并且具有良好的可扩展性和维护性。因此，如果你正在寻找一种通用且强大的垂直居中方法，Flexbox和Grid布局将是你的不二之选。

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！