justify-items 和 align-items 仅使子项在各自网格单元格内居中，不实现容器级绝对居中；单子项绝对居中应使用 margin: auto 或 place-items: center，注意层级覆盖与容器尺寸约束。
用 justify-items 和 align-items 居中网格子项，但要注意适用范围
justify-items: center 和 align-items: center 确实能让所有网格子项在各自单元格内居中（即沿行轴和列轴居中），但它们**不控制子项在整个网格容器内的整体位置**——只影响子项在其分配到的网格区域（grid area）里的对齐方式。
如果你的网格只有单个子项、或子项跨多行/列、或你希望它脱离网格轨道约束居中，这两个属性就不是最佳选择。
- 适用于：每个子项都占据一个标准网格单元格，且你想让它们统一居中显示
- 不适用于：想把一个子项“绝对居中”在整个容器可视区域中心
- 注意：
justify-items对display: grid容器生效，对display: inline-grid同样有效
真正让单个网格子项在容器正中心，该用 place-items 或 margin: auto
如果目标是让某一个子元素（比如 .card）在网格容器里水平+垂直绝对居中，最直接的方式是：
- 给该子项设置
margin: auto—— 前提是它没被显式指定grid-row/grid-column，且父容器是display: grid - 或者给父容器设
place-items: center（等价于justify-items: center; align-items: center），效果同上，但更简洁 - 避免混用：不要同时设
place-items: center和给子项加justify-self/align-self，后者会覆盖前者
div.grid-container {
display: grid;
place-items: center; /* 所有子项在容器中心对齐 */
height: 300px;
}
.grid-container > div {
width: 100px;
height: 100px;
background: #4a90e2;
}
为什么 justify-items center 看起来没效果？常见原因
经常看到开发者写了 justify-items: center 却发现子项没动，问题往往出在：
立即学习“前端免费学习笔记（深入）”；
- 子项设置了
justify-self: start（或其它值），它会覆盖容器级的justify-items - 网格容器没有明确高度（
height或min-height），导致内容高度由子项撑开，视觉上“居中”不明显 - 子项用了
grid-column: 1 / -1跨满整行，此时justify-items仍会让它在那一整行区域内居中 —— 但因宽度已占满，看不出变化 - 容器用了
grid-template-columns: 1fr但没设grid-template-rows，导致行轨道未定义，align-items失效
替代方案：用 place-self 精确控制单个子项
当你要居中的只是某个特定子项（比如第二个卡片），而不是全部，就别碰容器级属性，直接操作它自己：
-
place-self: center是最简写法（等价于justify-self: center; align-self: center） - 确保该子项所在网格区域有足够空间（比如父容器有明确宽高，或它跨了多行/列）
- 如果子项本身有固定尺寸，
place-self: center就能稳稳把它钉在分配到的网格区域中央
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px;
height: 200px;
}
.grid-container > :nth-child(2) {
place-self: center; / 只让第二个子项居中 /
}
网格居中的关键不在“加什么”，而在“加给谁”和“它有没有可居中的空间”。容器没尺寸、子项没轨道、或者对齐属性层级冲突，都会让 center 形同虚设。
