justify-items: center 未生效是因为父容器未设置 display: grid 或未定义网格轨道（如 grid-template-columns），它仅控制单元格内内容对齐，不改变网格项位置；应根据需求选用 justify-self、justify-content 或补全网格定义。
justify-items: center 为什么没让子元素水平居中？
justify-items: center 确实是 Grid 布局中控制**单个网格单元格内内容**水平对齐的属性，但它只在子元素是 网格项（grid item）且位于显式定义的网格轨道内 时才生效。常见失效场景包括：
- 父容器没设
display: grid或display: inline-grid - 子元素没被自动或显式分配到某个网格单元格（比如父容器只有
justify-items，但没用grid-template-columns等划分轨道） - 子元素本身是块级元素且宽度占满，
justify-items对它内部文本有效，但对整个块无效——这时你需要的是justify-self或容器级居中
真正让网格项整体水平居中，该用哪个属性？
如果目标是让某一个或多个 网格项在整行中水平居中（比如卡片、按钮），优先用 justify-self: center，它作用于单个网格项，不依赖单元格是否“有内容”：
.item {
justify-self: center;
}
如果想让所有网格项都居中，且父容器已定义列轨道（如 grid-template-columns: repeat(3, 1fr)），那么 justify-items: center 就能生效——它会让每个单元格里的内容（比如文字、内联元素）在各自单元格内居中。
但注意：justify-items 不会改变网格项本身的列位置，只是调整其内部对齐；而 justify-self 可以覆盖 justify-items，直接控制该项在轨道内的对齐方式。
更常见的需求：整行网格项居中排列（非单个居中）
如果你实际想要的是“三列网格在容器中整体居中”，而不是每个格子内部居中，那 justify-items 完全不相关。应该用容器级的 justify-content: center：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center; /* 关键：让整行网格轨道居中 */
}
这个配置会让三列总宽度（600px）在父容器中水平居中，左右留白相等。此时即使不设 justify-items，每个网格项也会自然按默认 stretch 撑满单元格——若你还希望单元格内文字居中，再加 justify-items: center 即可。
容易忽略的兼容性与嵌套陷阱
justify-items 和 justify-self 在现代浏览器支持良好，但 IE 完全不支持。另外，在 subgrid 或嵌套 Grid 中，它们的行为取决于父网格是否传递了对齐上下文——子网格默认不会继承父级的 justify-items，必须显式设置。
最常踩的坑是：给父容器写了 justify-items: center，但忘了定义 grid-template-columns，结果浏览器按“无显式列”的默认行为（即单列 auto）渲染，所有子项堆成一列，justify-items 看似“没反应”。先确认 grid-template-columns 或 grid-auto-columns 是否存在，再调对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
