[!info] related notes

• 所属 MOC: 前端基础 MOC, 前端八股文 MOC
• 相关概念: Flex, Grid, CSS 定位方式, 中国移动浙江金华系统开发工程师（Web端）春招复试准备

CSS 居中布局

一句话定义

CSS 居中不是“一招鲜”，而是要先分清你要让什么居中、在哪个方向居中、是否已知尺寸，再选最合适的方案。

为什么这题总让人答乱

因为“居中”其实至少包含几种不同问题：

• 文本在容器里水平居中
• 一个块级元素在父容器里水平居中
• 一个元素在父容器里垂直居中
• 一个元素在父容器里水平垂直都居中

如果不先区分场景，就很容易把所有答案混成一句“用 flex 就行”。

先按场景拆

1. 文本水平居中

最典型的是：

• 单行文本
• 多行文本

常见做法：

.parent {
  text-align: center;
}

这更适合“文本内容”而不是“任意块级盒子”。

2. 块级元素水平居中

当元素本身有宽度时，经典写法是：

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

这适合：

• 普通块级盒子
• 已知宽度

3. 双轴居中

现代前端里最稳的方案通常是 Flex：

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

这能同时完成：

• 水平居中
• 垂直居中

4. 双轴居中的另一种现代方案

Grid 也很适合：

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

如果场景本身就是二维布局，Grid 会很自然。

5. 绝对定位场景

如果元素脱离文档流，常见写法是：

.parent {
  position: relative;
}

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

它的特点是：

• 适合弹层、徽标、悬浮元素
• 但不是普通布局首选

面试里更稳的答法

与其直接背一种写法，不如按下面这个顺序回答：

1. 先问清场景：文本、块级元素，还是双轴居中
2. 再说现代方案：双轴一般优先 Flex，二维布局也可用 Grid
3. 最后补经典方案：块级水平居中可用 margin: 0 auto

这样会显得你是在“按场景选方案”，不是死背语法。

最小例子 / 最小场景

1. 一个按钮文字居中

• 如果只是文字本身，text-align: center 可能就够

2. 一个卡片在容器中居中

• 已知宽度，水平居中：margin: 0 auto

3. 一个 loading 组件在容器中央

• 更推荐 Flex 或 Grid 的双轴居中方案

最容易混淆的点

• text-align: center 主要影响行内内容和文本，不等于一切元素都能居中。
• margin: 0 auto 主要解决块级元素水平居中，不解决垂直居中。
• Flex 和 Grid 都能居中，但它们适合的布局语境不同。
• 绝对定位 + transform 很常见，但更偏特殊定位场景，不该拿它当所有布局的默认答案。

最短记忆方式

• 文本居中：text-align
• 块级水平居中：margin: 0 auto
• 双轴居中：优先 flex
• 特殊悬浮定位：absolute + transform

Related notes

• CSS MOC
• position