place-items: center可一键居中所有子元素，但若只居中单个需配合grid-column/grid-row跨满全区域；更推荐justify-self和align-self单独控制目标元素，优先级高于容器属性且不受其他子项干扰。
用 place-items 一键居中单个子元素
如果容器只有一两个子元素，又想让其中某个（比如按钮或 logo）在网格里绝对居中，place-items: center 是最简方案——但它作用于所有子项。所以得配合 grid-column 和 grid-row 把其他元素“挪开”，只留目标元素占满整个网格区域。
- 给父容器设
display: grid和place-items: center - 给要居中的元素显式设置
grid-column: 1 / -1和grid-row: 1 / -1（即跨满所有行列） - 其余兄弟元素加
grid-column: auto或直接隐藏（visibility: hidden），避免干扰居中计算
用 justify-self + align-self 精确控制单个元素
这是更稳妥的做法：父容器设 display: grid，但不设全局居中，只对目标元素单独设置对齐方式。它不受其他子元素位置影响，也不依赖网格线编号。
- 目标元素上写
justify-self: center（水平）和align-self: center（垂直） - 父容器必须有明确的网格轨道（哪怕只有一行一列），例如：
grid-template-columns: 1fr、grid-template-rows: 1fr - 若父容器没定义行列，
justify-self可能失效——浏览器无法确定“相对于哪条轴居中”
为什么 margin: auto 在 Grid 里有时不管用
margin: auto 在 Grid 容器中确实能居中单个元素，但前提是该元素必须是“可伸缩的块级盒”，且其所在的网格轨道要有剩余空间。
- 常见失效场景：父容器用了
grid-template-columns: fit-content(200px)，导致轨道宽度刚好卡死，没空间留给margin分配 - 元素本身设了
width: 100%或max-width: none，也会挤压margin的生效条件 - 更可靠的做法是搭配
justify-self，而不是依赖margin的隐式行为
兼容性与 fallback 注意点
Grid 居中在现代浏览器里很稳，但 IE11 完全不支持 justify-self 和 place-items；Safari 14.1 之前对 margin: auto 在 Grid 中的支持也有 bug。
- 如需兼容旧版 Safari，优先用
justify-self/align-self+ 显式grid-template - 面向 IE 的项目，得降级为 Flex 布局：
display: flex; justify-content: center; align-items: center - 别忘了测试容器尺寸为 0 或
overflow: hidden时，居中元素是否被裁切
真正容易被忽略的是：Grid 居中效果高度依赖父容器的尺寸和轨道定义。空容器、min-content 宽度、或者未设 height 的 flex 嵌套 Grid，都可能让 align-self: center 看似没反应——其实它对齐的是网格轨道，不是视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
