最简方案是父容器设 display: grid 和 place-items: center，且需确保容器有明确高度；它等价于 justify-items 和 align-items 同时设为 center，作用于所有直接子项，但不适用于嵌套子容器。
用 place-items 一行搞定居中
Grid 布局里让子元素水平垂直居中，最简方案就是直接在容器上设 place-items: center。它等价于同时设置 justify-items: center 和 align-items: center，作用于所有直接子项。
常见错误是误加 display: grid 到子元素上，或试图用 margin: auto —— 在 Grid 容器里，margin: auto 对齐只在某些特定轨道分配下才生效，不可靠。
- 必须确保父容器已声明
display: grid（或display: inline-grid） -
place-items是容器属性，不作用于嵌套子容器内部 - 若只需居中单个子项，且其他子项无需对齐，改用
justify-self+align-self更精准
当容器有显式 grid-template 时要注意轨道尺寸
如果容器设置了 grid-template-rows 或 grid-template-columns（比如 grid-template-rows: 100px），而内容本身高度小于该值，place-items: center 仍会居中——但前提是轨道本身有明确尺寸或留白空间。若轨道用 minmax(0, 1fr) 或 auto，且内容撑满，则视觉上可能“不动”。
- 典型陷阱：写成
grid-template-rows: auto后发现没居中 → 改为grid-template-rows: 1fr或加上min-height - 若容器高度未定义（比如父容器无高、又没设
height或min-height），Grid 轨道可能收缩，导致居中失效 - 调试时可临时加
border: 1px solid red看容器实际范围
兼容性与降级处理
place-items 在现代浏览器（Chrome 60+、Firefox 52+、Safari 11.1+）完全支持，但 IE 不支持 Grid 本身，所以无需单独考虑降级——整个 Grid 方案在 IE 下本就不可用。
- 如需支持旧版 Edge（16–17），
place-items可用，但注意其 Grid 实现有少量 bug，建议加display: -ms-grid备用（仅限极少数场景） - 纯内容居中且无需复杂布局时，Flex 仍是更稳妥的选择：
display: flex; justify-content: center; align-items: center - 不要为了兼容 IE 而强行用 Grid + JS 模拟，成本远高于换方案
别忘了显式定义 grid 容器范围
很多人写了 place-items: center 却没效果，根本原因是容器没真正成为 Grid —— 最常见的是忘了加 display: grid，或者被其他 CSS（比如 float、position: absolute）打断了文档流。
- 检查 computed style 中
display是否真为grid，而不是block或inline - 父元素若设了
overflow: hidden且子项溢出，可能裁剪掉“居中后”的部分区域，看起来像没居中 - 子元素若设了
align-self: start等，会覆盖容器的place-items，需一并清理
实际最简可用代码就三行：
div {
display: grid;
place-items: center;
height: 100vh; /* 确保容器有高度 */
}
真正卡住人的，往往不是语法，而是容器有没有高度、有没有被别的规则悄悄覆盖。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
