place-items: center没反应最常见原因是父容器未设display: grid；它仅对grid/inline-grid容器有效，且要求子元素为直接子项、未被align-self/justify-self覆盖，也不适用于absolute脱离文档流的元素。
place-items: center 为什么没反应
最常见原因是父容器根本不是 Grid 容器。place-items 对 display: block、display: flex 或未声明 display 的元素完全无效。它只响应 display: grid 或 display: inline-grid 的容器。
其他高频翻车点：
- 子元素被套了一层
<div>（比如 React 的 <code><fragment></fragment>或多余 wrapper），导致实际居中的是空容器，真内容成了“孙子” - 子元素设置了
position: absolute—— 脱离网格流后，place-items失去控制权 - 父容器没有高度（如缺
height: 100vh或min-height），子项又无内容撑开，视觉上“消失”而非“没居中” - Safari 10–11 存在兼容性问题，
place-items行为不稳定，建议用place-content: center+grid-template: 1fr / 1fr降级 - 给目标子元素加
place-self: center（推荐，简洁明确） - 或分开写
justify-self: center+align-self: center - 确保父容器仍为
display: grid，但不要设place-items，避免被覆盖
place-items 和 place-content 到底该用谁
这两个属性管的事完全不同，选错就白写：
place-items: center 控制每个子项**在各自网格单元格内**的对齐方式——比如一个图标在卡片里居中、多个按钮各自在格子里居中。
place-content: center 控制**整个网格轨道区域**（含空行空列）在父容器中的位置——比如一个 2×2 网格只填了左上角一个子项，place-content: center 会让这整个 2×2 的“网格块”在父容器里居中，子项相对位置不变。
多数单个主内容居中场景（登录框、模态框、全屏提示），直接用 place-items: center 更直白；若网格轨道未铺满容器且你想让“所有格子整体居中”，才需要 place-content。
只想居中某一个子项，别碰 place-items
place-items 是容器级批量控制属性，一设就是全体生效。想只动其中一个，必须绕过它：
注意：place-self 会覆盖 place-items 的继承值，所以即使父级写了 place-items: start，你也能靠 place-self: center 单独拉回一个元素。
IE 和旧版 Safari 怎么安全降级
place-items 在 IE 中完全不可用（IE 不支持现代 Grid），Safari 10.1 以下也不支持。但别急着写一堆 -ms- 前缀：
真正可靠的降级路径是：用 @supports (place-items: center) 包裹现代写法，再在外面写 Flexbox 回退方案。例如：
.container {
display: flex;
justify-content: center;
align-items: center;
}
@supports (display: grid) and (place-items: center) {
.container {
display: grid;
place-items: center;
}
}
这样既避开 IE 的 Grid 兼容黑洞，又不用维护两套 Grid 语法；Flexbox 回退在所有现代浏览器里行为一致，调试成本更低。
真正容易被忽略的是：place-items 的效果依赖子项是否保持“网格项”身份——一旦被 display: contents、visibility: hidden 或 float 干扰，它就静默失效，连报错都不会有。
