justify-items不生效的首要原因是容器未启用grid模式，必须确认computed display为grid或inline-grid，且子项为直接子元素、无justify-self覆盖、列轨道有效。
justify-items 不生效？先确认容器是 Grid 模式
它只在 display: grid 或 display: inline-grid 的元素上起作用。写了 justify-items: center 却没反应，大概率是 computed display 显示为 block、flex 或其他值。
- 用浏览器开发者工具检查目标父元素的 computed styles，确认
display确实是grid - 别误以为加了
grid-template-columns或gap就自动启用 Grid —— 它们不触发布局模式切换 - 注意 JS 动态修改或全局 reset.css（比如
div { display: block !important }）可能覆盖你的设置 -
display: -ms-grid（IE10/11 专用）不会激活现代justify-items，需搭配display: grid双写才兼容
align-items 不生效？看父容器有没有高度和子项是否“锁死”
align-items: stretch（默认值）需要父容器有明确的交叉轴尺寸才能拉伸；而 align-items: center 等值也需要空间来定位。如果父容器 height 是 auto，它就塌缩到内容高度，没剩余空间可分配。
- 检查 computed
height：若为auto或0px，就是根源 - 补救方式：加
min-height: 100vh、height: 400px，或确保外层用flex: 1正确撑开 - 子元素写了
height、max-height、min-height或position: absolute，会直接禁用stretch行为 -
img标签自带固有尺寸，常导致视觉上“没居中”，需额外加height: 100%+object-fit: cover
子元素不是直接子项，这两个属性就完全不管它
justify-items 和 align-items 只影响 Grid 容器的**直接子元素**。中间多一层 wrapper（哪怕只是个空 div 或 Vue/React 的 Fragment），那个 wrapper 就成了 grid item，你真正想对齐的内容只是它的后代 —— 属性对它无效。
- 在 DevTools 中选中目标元素，往上逐级查看 DOM 结构，确认它是否紧贴在
display: grid元素之下 - 常见陷阱：Vue 的
<template></template>、React 的>、JSX 中动态插入的节点，都可能悄悄加包裹 - 修复方法：删掉冗余 wrapper，或把对齐属性移到真正的父容器上
justify-self / align-self 写了，但覆盖逻辑容易被忽略
justify-self 和 align-self 会覆盖容器级的 justify-items 和 align-items，但它们的 auto 值不是“恢复默认”，而是“继承容器的值”。而 justify-items 默认是 stretch，不是 start。
- 现象：
justify-items: center下某个子项加了justify-self: auto，结果却靠左 → 实际是它继承了center，但该子项有width或max-width，导致拉伸失败，视觉上像没生效 - 调试建议：hover 查看该子项的 computed
justify-self，确认最终生效的是哪个值 - IE11 完全不支持这两个属性，若需兼容，只能退回到
margin: auto或单行 flex 布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
