place-items 无反应最常见原因是父容器未设 display: grid；它仅对 Grid 容器有效，要求子项为直接子元素，且不被 align-self/justify-self 覆盖，取值仅限对齐关键字，不支持长度单位或 flex 值。
place-items 为什么写了没反应
最常见原因是父容器没设 display: grid。place-items 是纯 Grid 容器属性，对 flex、block 或 absolute 容器完全无效。它也不作用于孙子节点——哪怕你套了一层 div 或 React 的 Fragment，子盒子就不再是“直接子项”，对齐立即失效。
另一个高频翻车点：子项自己写了 align-self 或 justify-self。这两个属性优先级高于 place-items，会直接覆盖。检查开发者工具里该子项的 computed 样式，看 align-self 是否显示为 auto（继承 place-items）还是其他值。
- 确认父容器有
display: grid或display: inline-grid - 确保目标盒子是父容器的**直接子元素**，中间不能有包装层
- 子项上不要同时写
align-self/justify-self，否则place-items被跳过 - IE 10/11 完全不识别
place-items，连带忽略整条声明
place-items 的合法取值和常见误用
place-items 只接受对齐关键字，不能混用长度单位或 flex 专用值。比如 place-items: center 10px 或 place-items: flex-start 都是无效写法，浏览器会直接丢弃整条规则。
它的语法分单值和双值两种：
- 单值（如
place-items: center）→ 同时设justify-items: center和align-items: center - 双值（如
place-items: start end）→justify-items: start+align-items: end，注意顺序是先主轴（justify）后交叉轴（align） - 不支持
safe/unsafe前缀，那是place-content的专属语法
别把它和 place-content 搞混：place-items 管的是每个子项在各自单元格里的位置；place-content 管的是整张网格（所有行和列轨道）在父容器里的摆放。一个只放了 1 个子项的 Grid，place-content 几乎永远不生效。
多子项场景下 place-items 的实际表现
当父容器有多个子项，且它们被分配到不同网格区域时，place-items: center 不会让所有子项“挤到容器正中心”，而是让每个子项各自在它所占的网格单元格内居中。
例如：
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; place-items: center; }
.item-a { grid-column: 1; grid-row: 1; }
.item-b { grid-column: 2; grid-row: 2; }
结果是：.item-a 居于左上格中央，.item-b 居于右下格中央——不是两个都跑到整个容器正中心。
- 如果想让多个子项整体视觉居中，得配合
place-content: center（前提是网格轨道总尺寸小于容器） - 如果子项用了
grid-column: 1 / -1占满整行，place-items: center仍会水平居中它，而不是贴左 - 子项设了
grid-area指向命名区域，place-items居中的仍是该区域内的内容盒，不是区域边框本身
兼容性与降级时容易忽略的细节
Chrome 57+、Firefox 45+、Safari 10.1+、Edge 16+ 都支持 place-items，但 Safari 10.0 有解析 bug，建议锁死最低版本为 10.1。
真正难处理的是 IE 兼容。IE 10/11 不仅不支持 place-items，连 display: grid 的现代语法都不认——你不能靠加前缀或 fallback 声明来“补救”。如果项目必须支持 IE，唯一可靠路径是绕开 Grid，改用 Flexbox 居中方案：
.container {
display: flex;
justify-content: center;
align-items: center;
}
@supports (display: grid) {
.container {
display: grid;
place-items: center;
}
}
这里的关键是：不要在同一个选择器里混写 place-items 和 -ms-grid-row-align，IE 会直接忽略整条规则。另外，place-items 对 display: contents 或 visibility: hidden 的子项仍会计算占位，但视觉上“消失”，容易误判为失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
