place-items: center 是最简居中方案，父容器设 display: grid 后一行代码即可实现水平垂直居中，不依赖子元素尺寸、无需 wrapper，但需明确高度且 IE 不支持。
place-items: center 是最简方案
只要父容器设为 display: grid，一行 place-items: center 就能同时搞定水平和垂直居中，不依赖子元素尺寸、无需额外 wrapper、也不用管 flex-direction 或 grid-template。
常见误操作是给子元素加 margin: auto 或试图用 justify-content 单独控制——其实 place-items 是 align-items 和 justify-items 的复合 shorthand，它对所有网格项生效，且默认作用于整个容器空间。
- 必须确保父容器有明确高度（比如
min-height: 100vh），否则可能“看不见居中效果” - 若子元素是多个，它们会各自居中（不是整体打包居中），这点和 flex 不同
- IE 不支持
place-items（Edge 16+ 才开始支持），老项目需降级用align-items+justify-content
grid-template-rows/cols 配合 justify-content/align-items 更可控
当你要居中的只是某个特定区域（比如页脚固定在底部、内容区垂直居中但头部要顶格），就不能只靠 place-items，得用显式网格线划分空间。
例如让一个 .content 在容器中垂直居中、顶部留空、底部撑满：用 grid-template-rows: auto 1fr auto，再给 .content 设 grid-row: 2，它自然落在中间那一行里。
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制列方向（水平）的对齐，仅在容器宽度 > 所有列总宽时生效 -
align-items控制行方向（垂直）的对齐，仅在容器高度 > 所有行总高时生效 - 这两个属性对单个网格项无效，只影响整个网格轨道的空白分配
place-self 覆盖单个网格项的居中行为
如果父容器用了 place-items: center，但其中某个按钮你想左对齐、某个图标想右对齐，就用 place-self 给对应元素单独覆盖。
它接受和 place-items 相同的值（center / start / end / stretch），优先级更高。
- 写法是直接加在子元素上：
place-self: start end（第一个值是 align-self，第二个是 justify-self） - 注意：IE 完全不支持
place-self，哪怕你只在现代浏览器用，也建议搭配 class 切换做渐进增强 - 别和
justify-self混用——place-self已包含两者，重复声明后者会被忽略
兼容性与 fallback 必须手动处理
CSS Grid 居中本身不自动降级，place-items 在 Safari 10.1+、Chrome 57+、Firefox 52+ 才稳定支持，iOS Safari 10.3 是关键分水岭。一旦回退到老浏览器，flex 方案不会自动接管。
所以实际项目中不能只写 display: grid，得叠加声明：
parent {
display: flex;
justify-content: center;
align-items: center;
display: grid;
place-items: center;
}
由于后写的 display 会覆盖前面的，这里利用了浏览器忽略不识别属性的特性：老浏览器跳过 display: grid 和 place-items，执行前面的 flex；新浏览器则用 grid。
真正容易被忽略的是：Grid 的居中逻辑依赖于容器尺寸是否“可计算”。如果父容器是 position: absolute 且没设宽高，或者被 overflow: hidden 截断，place-items 可能完全失效——这时候得检查 computed style 里的 height/width 是否为 auto 或 0px。
