justify-items 只在 display: grid 或 inline-grid 容器上生效，需确认 computed display 为 grid、子元素为直接子项、无 justify-self 覆盖、列轨道存在且有效。
justify-items 不生效，先看 computed display 是不是 grid
它只在 display: grid 或 display: inline-grid 的元素上起作用。其他任何值（block、flex、-ms-grid）都会让这个属性被浏览器直接忽略。
常见误判点：
- 写了
display: -ms-grid（IE10/11 专用），但没加display: grid双写 → 现代浏览器不识别，justify-items完全无效 - JS 动态修改了父元素的
display，比如初始化是grid，后续被设为none或block - 某个全局 reset.css 或 UI 框架样式带了
display: block !important，强行覆盖了你的grid
验证方式：打开开发者工具，选中目标父元素，在 Styles 面板里找 display，点开「Computed」标签页，确认最终值是 grid —— 不是「继承」、不是「initial」、不是「block」。
子元素不是直接子项，justify-items 就不会管它
justify-items 只影响 Grid 容器的**直接子元素**。中间插一层 wrapper（哪怕只是个空 <div>），那个 wrapper 就成了 grid item，而你真正想对齐的内容只是它的后代，完全不受控制。
<p>典型场景：</p>
<ul>
<li>Vue 中用了 <code><template></template> 包裹多个子节点，实际渲染后生成不可见的包裹结构
Fragment（>），但父容器没设 display: contents，导致 Fragment 节点成为真实 DOM 子节点调试建议：在 Elements 面板中从目标内容往上逐级点击，确认它是否**紧贴在 display: grid 的元素之下**。如果不是，就把 justify-items 移到真正的父容器上，或者删掉那层冗余 wrapper。
justify-self 显式设置会覆盖 justify-items
子元素上写了 justify-self，就会无视容器的 justify-items。注意：justify-self: auto 并不是“恢复默认”，而是“继承 justify-items 的当前值”；而 justify-items 默认是 stretch，不是 start。
容易踩的坑：
- 某个子项加了
justify-self: auto，但自身有width或max-width→ 拉伸失败，看起来像没居中 - 子项是图片等替换元素，默认带
min-width: auto，阻止justify-self: stretch生效 - 子项设了
position: absolute→ 完全脱离 Grid 流，justify-self和justify-items都失效
快速验证：hover 查看该子项的 computed justify-self 值，确认最终生效的是继承来的还是手动写的。
Grid 列轨道为空或塌缩，justify-items 失去作用基础
justify-items 对齐的是「所在列轨道内的空间」。如果父容器没定义列（grid-template-columns 缺失/为空/解析失败），或容器宽度为 0 / fit-content 下内容过窄导致列塌缩，那么就没有可对齐的“单元格”，属性自然无感。
检查重点：
- 父容器是否写了
grid-template-columns？值是否有效？none、空字符串、unset都不行 - 容器是否有可测量宽度？比如
width: 100%但父级是display: contents，或本身是inline元素 - 子项是否隐式跨列？单列网格（
1fr）下，子项默认占满整列 → 没有“空余空间”，justify-self: center看不出变化
修复思路：显式写 grid-column: 1 / 1 绑定列，或加多列定义（如 100px 1fr 100px），让对齐有空间可依。
