别再手动调margin了，这5种CSS垂直居中技巧让效率翻倍

日常开发的时候会碰到很多需要居中元素的场景，尤其对于强迫症来说，为了一点点偏差疯狂手调margin（比如我自己），这篇专门讲一下CSS中实现元素水平垂直居中的方法。

---

直接先上总结：

1. Flex布局：父元素设置 display: flex，justify-content: center，align-items: center
2. Grid布局：父元素设置 display: grid，place-items: center
3. 设置绝对定位 position: absolute，top: 50%，left: 50%，transform: translate(-50%, -50%)
4. 设置绝对定位 position: absolute，上下左右值设为0，margin: auto
5. （单行文本）设置行高和 text-align: center
6. （仅实现水平居中 ）（多个内联元素/设置了 display: inline-block 的块级元素）设置 text-align: center

想看详细介绍的继续往下看：

---

一、Flex布局（最常用）

.parent {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 500px;            /* 需要定义容器高度 */
}

• 适用元素：块级元素、内联元素（自动转为Flex Item）

• 使用场景：

  • 需要动态内容居中（子元素尺寸未知）
  • 混合布局（例如导航栏同时包含图片和文字）
  • 响应式布局（移动端和PC端通用）

• 特点：
  Flex容器会强制所有子元素变为Flex Item，消除块级与内联元素的差异，统一用Flex规则布局。

二、Grid布局（最高效）

.parent {
  display: grid;
  place-items: center; /* 同时实现水平垂直居中 */
  height: 500px;
}

• 适用元素：块级元素、内联元素（自动转为Grid Item）

• 使用场景：

  • 二维布局（同时控制行和列的对齐）
  • 复杂的网格结构（如仪表盘、卡片布局等）

• 特点：
  与Flex布局类似，Grid容器会覆盖子元素的原始类型，统一按Grid规则处理。

三、绝对定位 + transform

.parent {
  position: relative; /* 父元素需要有定位 */
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 适用元素：块级元素、内联元素（需转为 inline-block）

• 使用场景：

  • 弹出层、模态框的居中
  • 元素尺寸未知时的居中

• 注意：
  内联元素需要设置 display: inline-block 才能正确应用 transform。

四、绝对定位 + margin:auto（已知尺寸）

.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;  /* 必须指定宽高 */
height: 100px;
}

• 适用元素：块级元素

• 使用场景：

  • 已知固定尺寸元素的居中（如固定大小的图片或按钮）

• 限制：
  内联元素必须设置为 display: block 或 display: inline-block 并且设置 width/height 才能通过 margin: auto 居中。

五、行高 + text-align: center（单行文本）

.parent {
  height: 200px;
  line-height: 200px;  /* 垂直居中 */
  text-align: center;  /* 水平居中 */
}

• 适用元素：内联元素、inline-block 元素

• 使用场景：

  • 单行文本垂直居中
  • 按钮图标与文字混合对齐

• 限制：
  可以将块级元素设置为 inline-block来利用 text-align: center 实现水平居中，但是无法通过 <line-height 实现垂直居中。