必须同时设justify-content: center和align-items: center，且父容器需有可计算高度（如height: 100vh），否则align-items因交叉轴无尺寸而失效；align-content仅适用于多行场景，单行居中不可替代align-items。
Flex 实现水平垂直居中必须同时设 justify-content: center 和 align-items: center，且父容器要有可计算的高度（如 height: 100vh），否则垂直方向“看起来没反应”——这不是 bug，是 flex 的交叉轴对齐逻辑决定的。
Flex 居中为什么常“只水平居中、不垂直居中”
根本原因是 align-items 依赖父容器在交叉轴（默认为垂直方向）上有明确尺寸。如果父容器高度是 auto 或未声明，它会被子元素撑开，导致交叉轴剩余空间为 0，align-items: center 就失去作用对象。
- 常见错误：父容器只写了
display: flex; justify-content: center; align-items: center;，但没设height或min-height - 调试技巧：用开发者工具检查父容器的
computed height，确认是否 > 0 - 移动端注意：
100vh在 Safari 滚动时可能缩放，可用min-height: -webkit-fill-available兜底 - 别混淆
align-content：它只在多行 flex（flex-wrap: wrap）时控制“行与行之间”的对齐，单行居中完全无效
Grid 的 place-items: center 为什么更简但更易误用
place-items: center 是 justify-items: center + align-items: center 的简写，一行代码搞定，但它只作用于 grid 容器的**直接子元素**——嵌套一层后就失效，这点极易被忽略。
- 兼容性：Chrome 85+、Firefox 52+、Safari 14.1+ 支持良好；IE 完全不支持
- 和
place-content不是一回事：place-content控制的是整个 grid track（行列轨道）的对齐，不是 item - 若父容器已定义
grid-template-areas或显式行列，place-items仍生效，但可能被子元素自身的justify-self或align-self覆盖 - 不推荐在已有复杂 grid 结构的容器上盲目加
place-items，容易覆盖原有布局意图
Flex 与 Grid 在居中场景下的关键差异
两者都能实现居中，但底层机制和适用边界完全不同：
立即学习“前端免费学习笔记（深入）”；
- Flex 是一维布局模型：主轴（
justify-content）和交叉轴（align-items）分离，适合内容流驱动的场景（如导航栏、卡片列表） - Grid 是二维布局模型：天然支持行列定义，
place-items是对“单元格内 item”的对齐，更适合结构化页面（如仪表盘、响应式网格） - Flex 对子元素脱离文档流更敏感：子元素设了
position: absolute，justify-content/align-items完全无效；Grid 同样不处理绝对定位子项 - 性能无实质差异，但 Flex 的
align-items: stretch（默认）配合不定高子元素，在滚动列表中可能触发额外 layout 计算
真正容易被忽略的点是：Flex 的高度依赖是刚性的——你得主动给父容器一个可计算的交叉轴尺寸；而 Grid 的 place-items 虽然不显式要求高度，但一旦父容器本身没有足够空间（比如被 overflow: hidden 截断），居中效果也会“消失”。这两者都不是浏览器 bug，而是各自模型的设计前提。
