CSS 居中怎么写：4 种方案按场景对号入座，不用再背十种

约 6 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

场景一：文字水平居中——text-align 一行搞定

块级容器里的行内内容（文字、图片、inline / inline-block 元素）水平居中，用 text-align: center 加在容器上。注意它作用于「容器里的行内内容」，不是元素自己；给块级元素自己设 text-align 只会影响它的子内容。

.wrap { text-align: center; }
/* 图片记得设 display:inline-block 或保持默认 inline 才受 text-align 影响 */

场景二：块级元素水平居中——margin auto

有确定宽度的块级元素水平居中用 margin: 0 auto——auto 把剩余空间平分给左右。不生效的最常见原因有两个：元素没有设宽度（auto 占满一行，没有剩余空间可分）；或元素是 Flex/Grid 的子项，此时水平对齐由容器控制，margin auto 只在特殊用法里有意义。

.card {
  width: 320px;
  margin: 0 auto;   /* 左右 auto 平分剩余空间 */
}

场景三：垂直居中 / 水平垂直都居中——Flex 是默认答案

2016 年之后，垂直居中的默认答案是 Flex：容器三行，子项无论尺寸未知、多行还是动态高度都成立。水平垂直同时居中就两个属性一起上。Grid 同样可以：place-items: center 一行等价于两个轴一起居中，容器只有一个子项时最简洁。

.wrap {
  display: flex;
  justify-content: center;  /* 主轴（默认水平） */
  align-items: center;      /* 交叉轴（默认垂直） */
}

.wrap {
  display: grid;
  place-items: center;  /* align + justify 一步到位 */
}

场景四：浮层 / 弹窗居中——绝对定位 + transform 或 inset

必须脱离文档流的浮层用绝对定位居中。经典写法是 top 50% + translate(-50%, -50%)，位移基于自身尺寸，宽高未知也成立；现代写法 inset: 0 + margin: auto 配合定宽高，或干脆 inset: 0 + display: grid + place-items: center 让容器自己当居中层。transform 方案的唯一坑：translate 会创建层叠上下文，内部再写 z-index 时要意识到这一点。

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

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content; height: fit-content;
}

「为什么不生效」排查表

选型口诀

文字用 text-align，定宽块用 margin auto，其余一律 Flex（单子项可用 Grid place-items），浮层用绝对定位三件套。把「十种居中方法」收敛成这四条，以后写居中不需要回忆，只需要判断场景。

常见问题