CSS 居中大概是前端最经典的”看着简单做着崩”的题：justify-content 和 align-items 老是记混谁管水平谁管垂直、flex-direction 一改方向全反、明明设了 align-items: center 却纹丝不动。这些困惑几乎都来自同一个没理解透的概念——Flexbox 的主轴与交叉轴。把这两条轴搞懂，居中就再也不用试错。
居中难的根源：你在按”水平/垂直”记
大多数人记 Flex 属性的方式是”justify 管水平、align 管垂直”——这在默认布局下碰巧对，但只要 flex-direction 一改就全错。正确的心智模型是按轴来记：
- 主轴（main axis）：元素排列的方向，由
flex-direction决定 - 交叉轴（cross axis）：与主轴垂直的那条
两个对齐属性各管一条轴，永远不变：
justify-content→ 管主轴上的分布align-items→ 管交叉轴上的对齐
它们管的”方向”会随 direction 变，但管的”轴”始终不变。这就是关键。
主轴方向随 flex-direction 变
| flex-direction | 主轴 | justify-content 管 | align-items 管 |
|---|---|---|---|
| row（默认） | 水平 → | 左右分布 | 上下对齐 |
| column | 垂直 ↓ | 上下分布 | 左右对齐 |
看出来了吗——row 改成 column，justify 和 align 管的方向正好对调。所以”我把 direction 改成 column 后对齐全反了”不是 bug，是主轴转了 90 度。理清它最快的方式是用可视化工具切一下 direction，亲眼看方块怎么动，方向直觉一次就建立。
最常用的居中配方
记住轴之后，居中就是”两条轴都 center”：
/* 单个元素绝对居中（最经典） */
.container {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
min-height: 100vh; /* 别忘了给交叉轴空间 */
}/* Grid 写法，更短 */
.container {
display: grid;
place-items: center;
}整屏垂直居中务必加 min-height（如 100vh）——否则容器高度被内容撑满，align-items 没有可对齐的空间，看起来”没反应”，这是居中失败的头号原因。
align-items 不生效的三种排查
设了 align-items: center 却不居中，按顺序查：
- 容器没有交叉轴空间：row 下垂直居中需要容器有富余高度，给
height或min-height - 多行场景用错属性：
flex-wrap: wrap换行后，控制行整体分布的是align-content，不是align-items - 子元素有 align-self：子项上的
align-self会覆盖容器的align-items
Flex 还是 Grid
两者都能居中，怎么选：
- Flexbox 是一维（一行或一列）布局，单元素居中、一排图标/按钮垂直对齐用它最自然
- Grid 是二维布局，但做居中也极省：
place-items: center一行同时管行列两个方向；整页级居中容器用 Grid 往往比 Flex 更短
简单居中两者皆可、按习惯选；需要同时控制行和列的复杂排版（卡片网格、整页骨架）则用 Grid，框架内的局部元素再用 Flex 排——两者嵌套是常见且推荐的组合。
小结
CSS 居中的拦路虎不是属性多，而是用”水平/垂直”去记 justify-content 和 align-items，一遇 flex-direction 改变就乱。换成”justify 管主轴、align 管交叉轴，轴的方向跟着 direction 走”的模型，再记住”居中=两轴都 center + 给足交叉轴空间”，配合可视化工具切 direction 建立方向直觉，居中这道题就彻底通关了。