margin: auto在grid中只对未显式定位的直接子项生效，因显式设置grid-column等属性会接管位置控制；需容器有明确高度且子项为块级元素。
margin: auto 在 Grid 容器中为什么只对部分子项生效
它只对「未被显式定位」的直接子项起作用。一旦子元素写了 grid-column、grid-row、grid-area，浏览器就认为你已手动接管位置控制，margin: auto 会被直接忽略。
常见错误现象：子元素加了 grid-column: 2 / 4; 还想靠 margin: auto 居中——结果完全没反应。这不是 bug，是规范行为。
- 父容器必须是
display: grid，且有明确高度（如min-height: 100vh或grid-template-rows: 1fr），否则垂直方向无“剩余空间”可分配 - 子元素不能是
inline级别（比如<span></span>），需先设display: block - 子元素不能同时是浮动或绝对定位元素——它们已脱离网格流
place-items: center 比 margin: auto 更可靠
place-items: center 是 Grid 原生提供的对齐捷径，等价于 justify-items: center; align-items: center;，专为网格项设计，不依赖子项是否显式定位。
但它也有边界：如果某个子项设置了 grid-area，它仍会按区域定义渲染，绕过 place-items。所以它适合「主内容块唯一且不跨格」的场景，比如模态框、登录表单容器。
- 兼容性足够：Chrome 57+、Firefox 52+、Safari 10.1+
- 写法极简：
display: grid; place-items: center;，子项自动水平+垂直居中 - 不干扰其他子项布局逻辑——只影响未被
justify-self或align-self覆盖的项
justify-content/align-content 为什么经常失效
这两个属性不是控制网格项的，而是控制「整个网格轨道」在容器内的对齐方式。它们只在容器尺寸 > 所有轨道总尺寸时才生效——也就是必须有“多余空间”。
例如：grid-template-columns: 200px 200px;，若容器宽 800px，两列共占 400px，剩下 400px 就是多余空间，此时 justify-content: center 才会让两列整体居中；但如果容器刚好宽 400px，它就完全无效。
- 单行网格（
grid-template-rows: 1fr）下，align-content永远不生效 - 用
repeat(auto-fit, minmax(200px, 1fr)))这类响应式定义时，轨道数量动态变化，justify-content行为可能不稳定 - 想让单个网格项居中，别碰这两个属性——它们管的是“轨道组”，不是“项”
Grid 中真正能强制单个子项居中的办法
当你要精确控制某一个子项（比如右上角按钮、居中卡片），又不想受其他项干扰，justify-self 和 align-self 是最直接的选择。
它们作用于单个网格项，优先级高于 place-items，且不受是否跨格影响。哪怕该子项写了 grid-column: 1 / -1;，也能用 justify-self: center; 让它在所占列范围内水平居中。
-
justify-self: center;控制行内轴（水平），align-self: center;控制行外轴（垂直） - 组合写成
place-self: center;更简洁，语义也更清晰 - 注意：如果父容器用了
justify-content: flex-end这类 flex 属性（误加），会覆盖 Grid 行为——确保父容器只设 Grid 相关属性
place-items）、轨道级（justify-content）、项级（justify-self）。很多人卡在第一层就停了，但实际项目里，真正需要精细控制的，往往得落到最后一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
