Grid对齐属性生效的前提是父容器设为display: grid或inline-grid，否则justify-items、align-items等无效；需确认父容器尺寸非零且未被其他样式覆盖。
父容器没设 display: grid，子元素对齐自然无效
Grid 对齐属性（如 justify-items、align-items）只在父容器是 Grid 格式化上下文时才起作用。如果父元素只是普通块级元素，哪怕子元素写了 justify-self: center，也完全不会生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查父元素的
display值，确认是否为grid或inline-grid - 如果用了
float、position: absolute或其他脱离文档流的方式，Grid 布局可能已被破坏 - 注意 CSS 优先级：后声明的样式会覆盖前面同名规则，检查是否有其他 CSS 覆盖了
display: grid
justify-items 和 align-items 作用对象是子项内容，不是子项自身
这两个属性控制的是所有直接子元素的「内部内容」在各自网格区域中的对齐方式，不是让子元素在整体网格容器中居中。想让子元素在容器内水平/垂直居中，该用的是容器级对齐属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 让子元素在网格轨道内居中，应使用
justify-content: center（主轴）和align-content: center（交叉轴），但前提是网格线有剩余空间（即有多行/多列且未填满） - 若只有一行一列，
align-content无效；此时需配合place-items: center或分别设置justify-items+align-items - 注意：如果子元素设置了
width/height固定值，又没留空隙，对齐也可能“看起来没变化”
子元素显式设置了 justify-self 或 align-self，覆盖了父级 justify-items
子元素的 justify-self 和 align-self 优先级高于父容器的 justify-items 和 align-items。只要子元素自己写了这些属性，父级设置就会被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查子元素是否意外写了
justify-self: start或align-self: stretch（后者是默认值，但显式声明仍会覆盖） - 想恢复继承行为，可设为
justify-self: auto—— 这会让它重新读取父容器的justify-items - 用开发者工具的“Computed”面板看最终生效值，比只看“Styles”更可靠
网格容器尺寸为 0 或未定义，导致对齐无参考空间
Grid 容器如果没有明确宽高，又没有内容撑开，其尺寸可能是 0×0。此时即使写了 place-items: center，子元素也会挤在左上角——不是对齐失效，而是整个容器没空间可对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器加临时
border: 1px solid red或background: #eee，肉眼确认它是否渲染出了尺寸 - 检查是否父级用了
display: flex且未设flex-direction: column，导致 Grid 容器被压缩成一行高度 - 在响应式场景下，媒体查询可能清除了容器宽高，留意断点处的样式覆盖
