place-items不生效主因是子元素设置了align-self/justify-self、脱离Grid布局（如float/absolute/display:contents），或容器尺寸塌陷；需设min-height、明确尺寸或用flex降级兼容IE。
place-items 不生效的常见原因
直接给容器加 place-items: center 却没效果，大概率是子元素本身设置了 align-self 或 justify-self，这两个属性会覆盖 place-items 的全局设置。另外，如果子元素是 float、position: absolute 或者 display 为 contents，它就不再参与 Grid 布局，自然也不会被居中。
place-items 和 place-content 的区别要分清
place-items 控制的是每个 grid item 在单元格内的对齐（即单个子项的 align/justify），而 place-content 控制的是整个 grid track（行和列）在容器内的对齐（比如网格整体上偏还是下偏）。想让所有子项在各自格子里居中，用 place-items；想让整张网格在父容器里居中（比如网格本身比容器小），得配合 place-content 或 margin: auto。
Grid 容器必须有明确的尺寸或内容约束
如果 Grid 容器没有设定宽高，且子项又不撑开它，容器高度可能塌陷为 0，此时即使写了 place-items: center 也看不到居中效果。解决办法包括：
- 给容器设
min-height: 100vh或具体高度 - 确保至少有一个子项有明确尺寸（如
height: 100px） - 用
grid-template-rows: 1fr配合min-height拉伸行轨道
.grid {
display: grid;
place-items: center;
min-height: 100vh;
grid-template-rows: 1fr;
}
IE 不支持 place-items，需要降级方案
IE 完全不识别 place-items，如果项目还需兼容 IE，不能只靠它。稳妥做法是回退到传统写法：
立即学习“前端免费学习笔记（深入）”；
- 用
justify-items: center; align-items: center（同样不支持 IE，但语义更清晰） - 对单个子项，改用
justify-self: center; align-self: center - 终极兼容方案：用
display: flex替代display: grid，再配justify-content+align-items
真正容易被忽略的点是：当子元素是文字或内联元素时，place-items 居中的“中心”是其内容框（content box）的中心，不是字体基线——这点在混合图标和文字时容易造成视觉错位。
