justify-content: center 不生效主因是容器未撑开导致无剩余空间；需确保容器有足够宽度、非 inline-grid、未脱离文档流，并配合 place-items: center 实现完全居中。
justify-content: center 不生效的常见原因
Grid 容器里写了 justify-content: center 却没居中？大概率是容器本身没“撑开”——它默认宽度只包裹内容，没有足够剩余空间供居中分配。
典型表现：grid-template-columns 用了 auto-fit 或 auto-fill 配 minmax()，但父容器宽度太小或被限制；或者容器是 display: inline-grid，行为类似内联元素，不占满行宽。
- 检查父容器是否设置了固定宽高或
max-width，导致 Grid 容器无法扩展 - 确认 Grid 容器不是
inline-grid；需要居中时优先用display: grid - 用浏览器开发者工具选中容器，看 computed width 是否等于期望的可用宽度
必须配合的容器尺寸控制
Grid 的 justify-content 只在容器有“多余空间”时起作用。它不改变子项位置，只分配容器主轴（默认为水平）上的空隙。
所以你要先让容器有可分配的空间：
- 给 Grid 容器加
width: 100%或width: fit-content（后者适合内容不定但想居中的场景） - 如果父容器是 flex 布局，确保它没设
align-items: flex-start这类干扰项 - 避免对 Grid 容器设
float或position: absolute，它们会脱离文档流，影响空间计算
简单验证：临时加一句 background: #eee 到 Grid 容器上，看背景色是否铺满你预期的区域。
justify-content 和 place-items 的区别别搞混
justify-content: center 只管主轴（默认 x 轴），而你可能真正想要的是整体居中——这时候单靠它不够。
- 仅水平居中：用
justify-content: center - 仅垂直居中：用
align-content: center（注意：这是针对多行网格的，单行无效；单行请用align-items: center） - 完全居中（水平 + 垂直）：更稳妥的是
place-items: center，它等价于同时设justify-items: center和align-items: center，且对单个子项效果直接
示例：
.grid {<br> display: grid;<br> place-items: center;<br> height: 400px;<br>}
比分别写两个属性更简洁，也更少出错。
响应式下 justify-content 失效的隐藏陷阱
媒体查询里改了 grid-template-columns，但忘记同步调整 justify-content 的触发条件，就容易在小屏下“突然不居中”。
-
justify-content是否生效，取决于当前断点下容器宽度与所有列总宽的差值；列变少了，差值可能变小甚至为零 - 小屏常用
grid-template-columns: 1fr，此时所有列宽等于容器宽，无剩余空间，justify-content自然无效 - 解决思路：小屏改用
place-items: center+ 显式设容器高度，或用margin: 0 auto包裹整个 Grid 容器
最常被忽略的一点：Grid 居中本质是空间分配问题，不是“对齐魔法”。只要容器没留出空隙，再怎么调属性也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
