Flex适合单维内容居中，Grid适合二维网格布局；居中失败主因是父容器无宽高、子元素绝对定位或行内元素未设display:block。
元素没居中，大概率是布局方式和居中逻辑没对上。Flex 和 Grid 都能居中，但适用场景不同——Flex 适合单维（一行或一列）内容的对齐，Grid 更适合二维（行+列）的精确控制。选错方案反而让代码变复杂、效果难调。
用 Flex 居中：适合“容器里就一个或几个并排/堆叠的子元素”
比如按钮、卡片、登录框、导航项这类常见模块。关键是把父容器设为 display: flex，再用 justify-content 和 align-items 控制主轴和交叉轴。
- 水平+垂直居中（最常用）：
display: flex;<br>justify-content: center;<br>align-items: center;
- 只水平居中（如导航栏）：
display: flex;<br>justify-content: center;
（不用管 align-items，默认 stretch，不影响布局） - 只垂直居中（如文字在固定高容器中居中）：
display: flex;<br>align-items: center;
（主轴默认 row，所以不用 justify-content）
用 Grid 居中：适合“需要网格结构，或要精准控制行列位置”
比如仪表盘、响应式图册、表单布局、弹窗内容等。Grid 居中更“主动”，靠 place-items 或 justify-items + align-items 作用于整个网格容器，也可以用 place-self 单独控制某个子项。
- 全容器内所有子项统一居中：
display: grid;<br>place-items: center;
（等价于justify-items: center; align-items: center;） - 仅让某一个子元素居中（其他按默认网格排列）：
grid-column: 1 / -1;<br>grid-row: 1 / -1;<br>justify-self: center;<br>align-self: center;
（相当于把它拉满整行整列，再自身居中） - 配合
minmax()或fr实现响应式居中区域：display: grid;<br>grid-template-columns: 1fr minmax(0, 600px) 1fr;<br>place-items: center;
（中间列自适应最大 600px，整体内容始终居中）
别踩坑：为什么写了却没居中？
不是代码写错，而是被其他样式干扰了：
立即学习“前端免费学习笔记（深入）”；
-
父容器没设宽高：Flex/Grid 居中依赖父容器有明确的尺寸范围。如果父容器高度是
auto且子元素没撑开它，垂直居中就“没空间可居”。解决：给父容器加min-height: 100vh或明确 height。 -
子元素用了绝对定位：脱离文档流后，Flex/Grid 的对齐属性对它无效。解决：去掉
position: absolute，或改用 Grid 的place-self配合定位区域。 -
文本或行内元素混用：比如
<span></span>直接放在 Flex 容器里，默认不占满行高。解决：加align-self: center或设display: block。
一句话选型建议
就一个盒子要居中？用 Flex，代码少、兼容好、直觉强。
要排多个格子、要留白控制、要响应式断点重排？用 Grid，结构清晰、扩展性强、未来维护省心。
基本上就这些。不复杂，但容易忽略父容器尺寸和定位干扰。
