justify-content: center 未生效，通常因容器为单行/单列网格，此时应使用 justify-content 和 align-items 而非 align-content；多行时 align-content 才控制轨道整体在交叉轴的分布；最简方案是 place-items: center。
grid 容器里 justify-content: center 没生效？先看是不是单行
单行网格（只有一行或一列）时，align-content 不起作用——它只对多行/多列的网格轨道起作用。如果你的 grid-template-rows 或 grid-template-columns 只定义了一条轨道（比如 1fr），那 align-content: center 就是无效的。
此时真正控制内容块在容器内垂直居中的，是 align-items；水平居中靠 justify-items（针对所有子项）或子项自身的 justify-self/align-self。
- 想让所有子项整体在容器内水平+垂直居中 → 用
justify-content: center; align-items: center; - 想让每个子项自身内容居中（比如文字在格子内居中）→ 在子项上设
display: flex; justify-content: center; align-items: center; - 只有一行子项但高度没撑满容器？确保容器有明确高度（如
min-height: 100vh），否则align-items无参照基准
justify-content 和 align-content 的区别到底在哪
justify-content 控制的是**网格轨道（grid tracks）在主轴方向上的分布**，而 align-content 控制的是**所有轨道作为一个整体，在交叉轴方向上的分布**。
换句话说：
立即学习“前端免费学习笔记（深入）”；
- 主轴 =
grid-auto-flow: row时是水平方向；column时是垂直方向 - 交叉轴 = 与主轴垂直的方向
-
align-content生效前提是：网格容器在交叉轴方向上有“剩余空间”，且轨道总和小于容器尺寸（即有多余空间可分配）
常见误判场景：grid-template-rows: 100px 100px; + 容器高 300px → 剩余 100px 空间，此时 align-content: center 才会让两行轨道居中分布；如果容器高刚好 200px，就无效。
最简可靠方案：用 place-items: center
这是 justify-items 和 align-items 的简写，适用于所有子项统一居中。比同时写两个属性更简洁，也避开了 content 类属性的适用条件陷阱。
.grid-container {
display: grid;
place-items: center; /* 等价于 justify-items: center; align-items: center; */
min-height: 100vh;
}注意：place-items 影响的是**子项在各自网格区域内的对齐方式**，不是整个网格的定位。如果子项本身宽高不定（比如只有一段文字），它会自然收缩，然后被居中——效果就是文字在容器正中。
- 要让子项拉满网格区域再居中内容？加
width: 100%; height: 100%;或设grid-area: 1 / 1 / -1 / -1; - 要让多个子项整体居中（比如三张卡片并排，整体水平+垂直居中）？回到
justify-content: center; align-items: center;
调试时最容易忽略的一点
浏览器开发者工具里看到网格线正常，但内容偏移——大概率是子项有默认 margin（尤其 <p>、<h1>）、或父容器有 padding、或字体行高导致视觉偏差。不要只盯着 grid 属性调，先重置子项的 margin: 0; 和 line-height: 1; 看是否改善。
另外，justify-content 对 grid-auto-flow: column 的容器，作用方向会变成垂直方向——这点容易在响应式切换流向时翻车。
