根本原因是父容器未设display: grid或写错层级；place-items只对grid容器的直接子元素生效，且需容器有明确宽高空间。
place-items: center 为什么加了没反应
根本原因就一个：display: grid 没写，或者写在了错误层级。浏览器会直接忽略 place-items，连警告都不报。
常见错误现象：
- 给
<div class="wrapper"> 加了 <code>place-items: center，但没设display: grid - 内容嵌套太深，比如
<div class="grid"><div><img></div></div>—— 此时place-items只对那个中间<div> 生效，不是对 <code><img> - 容器高度是
auto，又没内容撑开，垂直方向“没空间可居中” - 必须显式写
display: grid（不能靠类名或继承） - 目标元素要是网格容器的**直接子元素**；否则用
display: contents把包裹层“透出去” - 容器至少要有明确高度参考，比如
min-height: 100vh或height: 300px - 想把整个卡片模块在页面中居中，却给卡片自身加
place-content: center→ 没效果，因为卡片只有一行一列，没有“轨道堆叠” - 同时写
place-items: center和place-content: center→ 后者可能被忽略，或行为不可预测 - 让子元素居中：只用
place-items: center，确保父容器是display: grid - 让多行网格整体在容器里居中（比如三行内容在 500px 高容器里垂直居中）：用
place-content: center - 想让整个 grid 容器在页面中居中？得靠它的**父元素**设
display: flex+justify-content: center+align-items: center - 小屏单列布局：
grid-template-columns: 1fr→ 主轴垂直，交叉轴就是水平 →place-items: center主要影响子项左右位置 - 大屏三列布局：
grid-template-columns: repeat(3, 1fr)→ 主轴水平，交叉轴变成垂直 → 同一句place-items: center开始控制子项上下位置 - 媒体查询里不要只改列数，记得同步确认
place-items是否仍符合预期 - 如果某断点下需要固定对齐方式（比如始终垂直居中），改用分离写法：
justify-items: center+align-items: center，再按需覆盖其中一项 - 避免依赖
place-content来“补救”响应式错位，它解决的是另一类问题 - 用分离写法代替简写：
justify-items: center; align-items: center;—— 兼容性略好，语义等价，且部分老版本 Safari 对分离属性识别更稳 - 不强依赖 Grid 居中？退到 Flexbox：
display: flex; justify-content: center; align-items: center;，兼容性覆盖更广 - 如果只是单个块级元素水平居中，
margin: 0 auto仍是零成本首选，无需布局模式切换
实操建议：
place-items: center 和 place-content: center 到底谁管谁
place-items 管的是**子元素在各自网格单元格里的位置**；place-content 管的是**所有网格轨道（rows/columns）在容器内的分布**——两者完全不重叠，也不能互相替代。
典型误用场景：
实操建议：
响应式下 place-items: center 的行为变化
它不是“永远水平+垂直居中”，而是始终作用于当前网格的**交叉轴**——而交叉轴方向取决于 grid-auto-flow 和 grid-template-columns 的配置。
举个例子：
实操建议：
兼容性与降级方案怎么选
place-items: center 在 Chrome 57+/Firefox 52+/Safari 10.1+ 支持良好，但旧 Android WebView（4.4 及更早）和 IE 完全不支持。真正在意兼容性时，别赌它能兜底。
更稳妥的做法：
真正容易被忽略的点是：你调的到底是谁的对齐——是容器怎么放、轨道怎么排，还是子元素怎么摆。写之前先问一句：我要居中的那个东西，在 DOM 树里是第几层？它的父容器有没有声明布局上下文？
