place-items: center 能直接居中所有直系子元素，但仅对 display: grid 容器生效，不作用于绝对定位、浮动或孙子元素，且会被子元素的 justify-self/align-self 覆盖。
place-items 能不能直接居中所有子元素
能，但只对 grid 容器的**直系子元素**生效，且要求容器显式声明为 display: grid。它不会影响孙子级、浮动元素、绝对定位子项，也不会改变文档流中其他布局方式的元素。
-
place-items是justify-items和align-items的简写，值为center时等价于justify-items: center; align-items: center; - 如果子元素本身设置了
align-self或justify-self，会覆盖place-items的设置 - 不支持 IE，
place-items在 Safari 10.1+、Chrome 57+、Firefox 45+ 可用；旧版 Safari 需用place-content+ 显式定义网格轨道（见下条）
为什么 place-items 在 Grid 中有时没反应
最常见原因是容器没真正变成 Grid 容器，或子元素“逃出”了 Grid 的控制范围。
- 忘记写
display: grid——place-items对flex、block或inline容器完全无效 - 子元素设置了
position: absolute—— 绝对定位元素脱离 Grid 布局流，place-items对其无作用 - 父容器有
grid-template-areas但子元素没匹配grid-area，导致子项被挤到隐式网格行中，此时place-items仍生效，但视觉上可能偏移（因隐式行默认高度为auto） - Safari 10–11 对
place-items支持不稳定，可降级为place-content: center;+ 显式定义单格网格：grid-template: 1fr / 1fr;
place-items: center 和 margin: auto 哪个更可靠
place-items: center 更可控，margin: auto 在 Grid 中是“备选方案”，但行为不同。
-
place-items: center居中的是**所有子元素的容器框（grid area）**，每个子项在其分配的网格区域内居中 -
margin: auto在 Grid 中只有当子元素**没有被分配到具体网格区域**（即未设grid-column/grid-row）时，才触发“自动居中到整个网格容器中心”，属于隐式行为，不易预测 - 若子元素已通过
grid-column: 1 / -1占满整行，则margin: auto失效；而place-items: center依然对其内容起作用 - 性能上无明显差异，但
place-items语义清晰、意图明确，调试时更容易追溯
兼容性差时怎么安全降级
真要兼容 Safari 10 或某些安卓 WebView，别硬扛 place-items，改用最小化 Grid 布局 + place-content。
/* 安全写法：显式单单元格网格 */
.container {
display: grid;
grid-template: 1fr / 1fr; /* 一行一列 */
place-content: center; /* Safari 10.1+ 支持 */
/* 不用 place-items，避免 Safari 10 bug */
}
.child {
/* 子元素无需额外设置 */
}
- 避免用
place-items+ 空grid-template-areas，这在旧 Safari 中常失效 - 如果必须支持 IE，就放弃 Grid 居中，改用
display: flex+justify-content/align-items，或绝对定位 +transform: translate(-50%, -50%) - 注意：
place-content居中的是**整个网格内容盒（content box）**，不是每个子项；所以它适合单子项场景，多子项时仍需place-items或逐个设置justify-self/align-self
Grid 居中看着简单，但 place-items 的生效前提很具体——它不像 Flex 那样“沾边就动”，而是严格绑定在网格轨道和子项分配关系上。最容易忽略的，就是以为写了 place-items: center 就万事大吉，却忘了检查子元素是否真的被 Grid 管理着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
