彻底搞懂 div 内容居中的全部方法

本文全面总结了div内容居中的各种方法，涵盖水平居中与垂直居中，水平居中包括text-align:center、margin:0 auto、flex布局等；垂直居中涉及line-height、padding、flex、grid、position+transform等技巧，同时介绍了多行文本、不定宽高元素、浮动元素等场景的解决方案，并对比了各方法的适用场景与兼容性，帮助开发者根据实际需求灵活选择最简洁、可靠的居中实现方式。

在网页开发中，让一个 div 里的内容居中，是出现频率最高的需求之一，看似简单，但不少新手甚至老手都会在“水平居中”和“垂直居中”上犯迷糊，今天这篇文章，咱们一次性把 div 内容居中的各类场景和写法讲清楚,建议收藏。

先明确“居中”指的是什么

在写 CSS 之前,先搞清楚你要让什么居中：

• 块级元素本身居中：让 div 在父容器里居中。
• 居中：让文字、图片、span 在 div 里居中。
• 块级子元素居中：让一个或多个块级子元素在 div 里居中。

不同情况用不同的方法，别一上来就 text-align: center 一把梭。

水平居中

水平居中

div 里是文字、图片或行内元素，直接给 div 设置：

.text-center {
  text-align: center;
}

这是最简单、最常用的方法。

块级子元素水平居中

如果子元素是 div、ul 等块级元素，且它有明确的宽度，可以使用 margin: 0 auto：

.child {
  width: 300px;
  margin: 0 auto;
}

注意：如果子元素宽度不固定，或者你想让它自适应内容宽度，可以将其变为 inline-block 或 fit-content：

.parent {
  text-align: center;
}
.child {
  display: inline-block; /* 或 width: fit-content */
}

Flex 实现水平居中

无论是行内还是块级，Flex 通吃：

.parent {
  display: flex;
  justify-content: center;
}

如果子元素不换行，还可以加 flex-direction: column 配合 align-items 实现垂直方向上的居中（见下文）。

垂直居中

垂直居中比水平居中要复杂,但也正是面试和实战中的常客。

单行文字垂直居中

让 div 的高度和 line-height 相等：

.one-line {
  height: 60px;
  line-height: 60px;
  text-align: center; /* 顺便水平居中 */
}

注意：只适用于单行文本,多行会溢出。

多行文字垂直居中（老方法）

使用 display: table-cell 和 vertical-align: middle：

.parent {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}

原理是模拟表格单元格的垂直对齐。

Flex 垂直居中

最推荐的方法,一行搞定：

.parent {
  display: flex;
  align-items: center;
  justify-content: center; /* 如果你也想水平居中 */
}

align-items: center 控制交叉轴（默认垂直方向）居中。

Grid 垂直居中

Grid 同样强大：

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

place-items: center 是 align-items: center 和 justify-items: center 的简写,非常适合让唯一的子元素居中。

终极：水平垂直居中

Flex + margin auto

在 Flex 容器中，子元素 margin: auto 可以同时实现水平垂直居中：

.parent {
  display: flex;
}
.child {
  margin: auto;
}

简洁优雅,兼容性好。

绝对定位 + transform

给父元素相对定位,子元素绝对定位：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

原理：子元素左上角先定位到父元素中心，再用 translate 把自己的宽高的一半移回去,这种方法不需要知道子元素具体的宽高。

绝对定位 + inset + margin auto

如果你知道子元素的宽高（或者设置宽高）,可以用：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

原理：上下左右都为 0，再配合 margin: auto,子元素会被拉伸至包裹范围并居中。

Grid 的 place-items

再次推荐,最简单：

.parent {
  display: grid;
  place-items: center;
}

短小精悍,现代浏览器全都支持。

各种方法的取舍

• 如果目标是现代浏览器，优先用 Flex 或 Grid，代码简洁、语义明确。
• 如果需要兼容老浏览器（IE 或旧安卓），可以用 table-cell 或 绝对定位 + transform。
• 单行文字居中，用 line-height 最快。
• 多行文字居中，Flex 或 table-cell 都行。

最后的小提醒

居中”看似基础，但很多复杂的布局问题都源于对居中原理的不清晰，建议你把上面所有代码自己敲一遍，观察不同方法的效果，尤其是 Flex 和 Grid，它们不仅是居中利器，更是现代布局的基石，掌握了它们，以后遇到居中问题,就能闭着眼写出答案了。

希望这篇文章能帮到你，如果你有更好的居中方案,欢迎在评论区分享！