place-items: center 是最简方案，但只对未被接管位置的子项生效；需确保父容器为 grid、子项为直接子代、无 self 属性覆盖、容器有明确高度，否则需拆解为 align-items 和 justify-items 调试，单个子项居中用 place-self: center 更精准。
place-items: center 是最简方案，但只对“未被接管位置”的子项生效
直接给 Grid 容器加 place-items: center 就能同时水平+垂直居中所有子项，前提是这些子项没被显式定位。它本质是 justify-items: center 和 align-items: center 的简写，但不是万能胶——写了不生效，大概率是因为下面几条之一：
- 父容器没设
display: grid或display: inline-grid（仅写place-items不会自动触发 Grid 模式） - 目标元素不是 Grid 容器的**直接子代**（比如 React 中用了
<Fragment>或多套一层<div>） - 某个子项自己设置了
align-self: start或place-self: start，覆盖了容器级设置 - 容器高度塌陷（
height或min-height缺失），导致垂直方向无空间可居中
align-items + justify-items 组合更可控，适合调试失效场景
当 place-items 看似没反应时，拆开写 align-items: center 和 justify-items: center 能帮你快速定位问题：前者管垂直（块轴），后者管水平（行内轴），两者都只作用于子项所在的**单元格内部**，不是整个容器。
-
align-items: center让每个子项在它被分配到的那行轨道里垂直居中；若有多行（如grid-template-rows: 100px 1fr 80px），每项只在自己那行里居中 -
justify-items: center同理，控制每项在列轨道内的水平位置；如果某列宽度固定（如100px），居中效果才明显 - 两者必须配合明确高度（如
min-height: 100vh）和合理列定义（如grid-template-columns: 1fr 1fr）才能稳定生效
单个子项要居中？别动容器，用 place-self: center
想只让登录框居中、其余卡片按网格流排列？place-items 是批量操作，这时候该上 place-self: center —— 直接加在那个子元素上，它就无视容器设置，在自己所占的网格区域里横竖居中。
- 等价于同时写
justify-self: center和align-self: center - 比
margin: auto更可靠：后者在 Grid 中只对“未设grid-column/grid-row”的子项有效，且依赖轨道尺寸为auto或fit-content - 如果该子项跨多行（如
grid-row: 1 / 3），align-self: center会让它在这两行合并后的轨道内垂直居中，不是按整个容器高度算
旧版 Safari 兼容性要留意，IE 可直接忽略
place-items 在 Safari ≤15.4 中不支持，但 align-items: center + justify-content: center 在 Grid 容器上也能凑效（注意是 justify-content，不是 justify-items）—— 这是兼容写法，不是语义等价。
立即学习“前端免费学习笔记（深入）”；
- Chrome 57+、Firefox 52+、Safari 10.1+ 均支持
place-items，实际项目中只需考虑 Safari 15.4 及更早版本 - IE 完全不支持现代 Grid，2026 年已无必要降级适配
- 真正容易被忽略的是：有些团队在 CSS 预处理器里写了
@supports (place-items: center)，却忘了 Safari 15.4 会进 fallback 分支，结果 fallback 代码本身又漏了justify-content的补丁
