justify-self 未生效的主因是未正确作用于直系网格项、父容器缺失列轨道、子项占满整列无空余空间、被 margin: auto 覆盖或父容器脱离网格上下文。
justify-self 不是“失效”，而是它根本没被触发——90% 的情况，你写的那行 CSS 压根没进入浏览器的对齐计算流程。
justify-self 写在父容器上？浏览器直接忽略
很多人把 justify-self 当成 justify-content 的子集，顺手写在父元素上：.grid-container { justify-self: center; }。这行代码不会报错，也不会出现在 computed styles 里——浏览器解析时就跳过了，DevTools 根本不认它。
必须写在网格项（grid item）上，且该元素必须是 display: grid 容器的**直系子元素**：
.grid-container { display: grid; grid-template-columns: 1fr 1fr; }-
.grid-item { justify-self: center; }✅ -
.wrapper > .grid-item { justify-self: center; }❌（.wrapper才是网格项，.grid-item是孙子节点）
父容器没列轨道，justify-self 就是废代码
justify-self 对齐的是「所在列轨道内的空余空间」，不是整个容器。如果父容器只有 display: grid 却没定义列，比如漏了 grid-template-columns，或者写了 grid-template-columns: none，那连轨道都没生成，justify-self 就无处发力。
常见陷阱：
- 容器宽度为
0或max-content且内容极窄，导致列塌缩为 0 - 用了
display: contents，父容器退出网格上下文，子元素变“孤儿” - 子元素设了
position: absolute，脱离网格流，justify-self和align-self全部静默丢弃
验证方法：在 DevTools 中检查父元素的 computed display 是否为 grid，再看 grid-template-columns 解析后是否非空。
子项占满整列，justify-self 没空间可对齐
当容器只有一列（如 grid-template-columns: 1fr），而子项又没显式声明 grid-column，它会默认跨列（grid-column: 1 / -1），结果就是贴满左右边界——此时 justify-self: center 看起来完全没反应。
这不是 bug，是设计逻辑：没有空余空间，就无可对齐。
解决路径很具体：
- 给子项加
grid-column: 1 / 1，绑定到第一列，避免隐式跨列 - 把容器改成多列，例如
grid-template-columns: 100px 1fr 100px，再让子项只占中间列 - 图片等替换元素要加
min-width: 0，否则默认min-width: auto会锁死宽度，让justify-self: stretch失效
justify-self 和 margin: auto 同时存在？后者赢，且不提醒
CSS 规范明确：只要某轴上出现 margin-left: auto 或 margin: auto，对应方向的 justify-self 值就会被直接忽略——不警告、不报错、DevTools 里可能还显示为 end，但实际不生效。
这种冲突常导致“有时有效、有时无效”的抖动现象，尤其在响应式布局中。
调试建议：
- 想用
justify-self控制水平位置，先清掉所有margin声明 - 想用
margin: auto居中，就别写justify-self，并确保该子项所在轨道没被其他项撑满 - 二者混用等于主动放弃控制权，不是兼容问题，是规范行为
真正容易被忽略的是：justify-self 的“无效”往往不是样式没加载，也不是浏览器不支持，而是它压根没进入对齐阶段——要么不在网格轴线上，要么没空间，要么被 margin 覆盖，要么写错了作用对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
