margin: auto 不能居中 Grid 容器本身，仅用于对齐网格项；容器居中需自身设 margin: 0 auto 并限定 width；子项居中应优先用 justify-self/align-self，而非 margin: auto 或 justify-content。
margin: auto 在 CSS Grid 容器中不能水平居中「容器」本身——它根本不是设计来居中容器的，而是用来对齐网格项（grid items） 的。如果你写了 margin: auto 却发现整个 Grid 容器贴左、没居中，问题不在 Grid，而在你把样式加错了对象。
margin: auto 对 Grid 容器无效，因为它不是块级流中的普通子元素
Grid 容器（即设了 display: grid 的元素）本身是一个块级元素，但它能否靠 margin: auto 居中，只取决于它自己的父容器，和 Grid 内部逻辑无关。
- 如果你想让整个 Grid 容器在页面里水平居中，得给它自己加
margin: 0 auto，同时确保：- 它有明确的
width（不能是auto或100%） - 它的父容器有足够宽度（比如
body或一个div），且未设置float、position: absolute等脱离文档流的属性
- 它有明确的
- 常见错误：把
margin: auto写在 Grid 容器的子元素上，却期望它“推着容器一起动”——不可能，子项的 margin 不会影响父容器位置。
Grid 子项写 margin: auto 却不居中？检查是否被显式定位接管
这是最常踩的坑：你在 Grid 子项上写了 margin: 0 auto，但子项依然贴左上角。
-
margin: auto在 Grid 中只对未显式定位的直接子项生效
一旦子项写了grid-column、grid-row、grid-area，浏览器就认为你已手动控制它的位置，margin: auto被直接忽略。 - 典型失效写法：
.item { grid-column: 2 / 4; margin: 0 auto; /* 这行完全无效 */ } - 正确做法：要么删掉
grid-column，靠 Grid 自动分配轨道；要么改用justify-self: center（更可靠，且不受跨格影响）。
想让单个网格项居中？优先用 justify-self 和 align-self
它们是 Grid 原生、精准、优先级高于 place-items 的控制方式，不依赖“是否留白”或“是否显式定位”。
立即学习“前端免费学习笔记（深入）”；
-
justify-self: center控制单个子项的行内轴（默认水平）对齐 -
align-self: center控制行轴（默认垂直）对齐 - 支持跨格子项，也兼容
grid-area - 示例：
.centered-card { grid-area: main; justify-self: center; align-self: center; }
注意：justify-self 和 align-self 是作用于子项的，不是容器属性。
容器级居中别碰 justify-content，除非你真想居中“轨道组”
很多人误以为给 Grid 容器加 justify-content: center 就能让某个子项居中——其实它居中的是所有列轨道组成的整体。
- 它只在容器宽度 > 所有列轨道总宽度时才生效（比如
grid-template-columns: 200px 200px，容器宽 800px，才有 400px 剩余空间可分配） - 单列定义如
grid-template-columns: 1fr下，justify-content完全无效 - 如果你只有一个子项，又想它水平居中，
justify-content不是你该用的工具
真正容易被忽略的点：Grid 中没有“万能居中属性”。margin: auto、place-items、justify-self 各管一段，混用前必须清楚谁在控制谁的位置。
