居中，是前端开发里最常被问到、也最容易踩坑的问题之一：明明写了 text-align: center 却对块级元素无效、子元素始终贴在容器上边缘、多行文字永远对不齐……这篇文章一次讲清水平居中、垂直居中、完全居中的全部主流方案，给出每种方案的原理、代码和适用边界，帮你遇到任何居中需求都能快速选对写法。

适用读者：掌握基础 HTML/CSS 的开发者与 Web 学习者。示例基于现代浏览器（Chrome / Edge / Safari / Firefox），除特别说明外不依赖老旧写法。

认识居中：先分清三类目标

居中需求看似五花八门，拆开看只有三类：水平居中、垂直居中、完全居中（两个方向同时居中）。先判断你要的是哪一种，再选方案，往往比死记写法更有效。

另一个关键前提是元素类型：行内元素（如 span、a、img、文本）随内容横向排列；块级元素（如 div、p、section）独占一行、默认占满父容器宽度。同一段 CSS 对两类元素的效果完全不同，下面每种方案都会标注它针对哪类元素。

水平居中

行内元素：text-align

让行内元素在父容器内水平居中，最简单的方式是给父容器设置 text-align: center。它作用于容器内的所有行内子元素，包括文本、图片和 span。

.parent {
  text-align: center;
}

定宽块级元素：margin auto

块级元素需要明确宽度，再用 margin: 0 auto 让左右外边距自动平分，即可实现水平居中。

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

关键：margin: 0 auto 只在元素有明确宽度（width 或 max-width）时生效。块级元素默认占满父容器宽度，没有剩余空间可供外边距平分。

不定宽 / 多元素：Flex 与 Grid

当元素宽度不固定、或多个元素需要整体居中时，用 Flexbox 的 justify-content 最省心：

.parent {
  display: flex;
  justify-content: center; /* 主轴水平居中 */
}

同理，Grid 下给容器设置 justify-content: center 也能让子元素水平居中。

垂直居中

单行文本：line-height

让行高等于容器高度，单行文本就会被推到垂直居中。这是处理按钮、标签等单行文本最快的方式，前提是容器有确定高度、内容只有一行。

.box {
  height: 48px;
  line-height: 48px; /* 行高等于容器高度 */
}

表格单元格：vertical-align

利用 table-cell 的 vertical-align: middle，可以把任意内容（含多行）在容器内垂直居中。这是早期兼容性最好的方案，适合需要兼容老环境、且不介意语义化打折的场景。

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

最常用：Flexbox

给父容器设置 display: flex 加 align-items: center，子元素就会沿交叉轴垂直居中，对单行、多行、图片和任意内容都有效，是目前最主流的写法。

.parent {
  display: flex;
  align-items: center; /* 交叉轴垂直居中 */
}

Grid：align-items

Grid 同样支持 align-items: center，效果与 Flexbox 一致，适合已在用 Grid 布局的容器。

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

绝对定位 + transform

子元素绝对定位到父容器顶部 50%，再向上平移自身高度的一半，即可垂直居中。它的优势是不需要知道子元素的高度。

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 向上平移自身一半高度 */
}

使用前提是父容器设置了 position: relative（或其他非 static 定位），否则定位会相对最近的定位祖先或视口。

完全居中（水平 + 垂直）

Flex 双属性

Flexbox 一行容器同时设置两个属性即可完全居中，是最推荐的通用方案。

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

Grid：place-items

place-items: center 是 align-items 与 justify-items 的简写，一行代码实现完全居中，代码最简洁。

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

绝对定位 + margin auto

子元素四边贴住父容器并用 margin: auto 自动分配空间，可实现完全居中。要求子元素有确定的宽高。

.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /* 需要子元素有确定宽高 */
}

绝对定位 + transform

定位到父容器中心后，再按自身尺寸平移一半，无需知道子元素宽高即可完全居中。

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

方案对比一览

常见坑与注意事项

父容器没有确定高度

垂直居中（尤其是 align-items、绝对定位、line-height）都要求父容器有明确高度。如果父容器高度由内容撑开，垂直居中往往没有可参照的空间。给父容器显式 height 或 min-height 是第一步。

百分比高度依赖父级

子元素写 height: 50% 这类百分比时，要求父容器本身有确定高度（而非 auto），否则百分比无效。

transform 与 fixed 定位冲突

使用绝对定位 + transform 居中时，子元素会脱离文档流，且 transform 会改变后续 position: fixed 的参照系（fixed 会相对最近的 transform 祖先定位），布局时需留意。

line-height 只适合单行文本

内容换行成多行后，line-height 方案就会错位，此时应改用 Flexbox 的 align-items 或 table-cell 方案。

内容溢出：用 min-height 而非 height

当容器内容可能变多（如自适应高度文案）时，优先用 min-height 而非固定 height，避免内容溢出时裁切或重叠。

总结：30 秒选型

• 要水平居中：行内元素用 text-align，定宽块级用 margin: 0 auto，其余用 Flex / Grid 的 justify-content。

• 要垂直居中：单行文本用 line-height，其余首选 Flexbox 的 align-items: center；已用 Grid 则用 align-items。

• 要完全居中：优先 Grid 的 place-items: center 或 Flex 双属性；内容在绝对定位场景下用 translate 平移方案。

• 复杂自适应布局：Flexbox 和 Grid 是更稳妥的底座，记得给父容器明确的高度（height 或 min-height）。

一句话记忆：能不用定位就不用定位，优先 Flexbox 和 Grid；父容器先给足高度，再谈垂直居中。