place-items: center不生效，主因是父容器未设display: grid、子元素非直接子代或容器高度塌陷；它仅作用于未被grid-column或align-self覆盖的子项。
直接用 place-items: center 最快，但必须确保父容器是 display: grid、子元素是直接子代、且没被 grid-column 或 place-self 覆盖——否则它根本不会动。
为什么 place-items: center 有时不生效
这不是 bug，是 Grid 的对齐机制决定的：place-items 只作用于“未被接管位置”的子项。一旦你给某个子元素写了 grid-column: 2 / 4 或 align-self: start，它就跳过容器级设置，按自己的规则渲染。
- 父容器漏写
display: grid（只写place-items不会自动触发 Grid 模式） - 子元素被包裹在
<div>或<Fragment>里，不再是 Grid 容器的**直接子代** - 容器高度塌陷：没设
min-height: 100vh或height，导致垂直方向无空间可居中 - 子元素本身是
inline或display: contents，破坏了 grid item 行为
justify-content 和 align-content 别乱用
这两个属性控制的是**轨道（rows/columns）在容器内的对齐**，不是子元素。它们只在有多余轨道空间时才起效——比如 grid-template-columns: 200px 200px，但容器宽 800px，多出的 400px 才会被 justify-content: center 分配。
- 单行单列网格（如
grid-template-columns: 1fr）下，justify-content和align-content完全无效 - 想靠它们居中一个子元素？先加
grid-template-rows: repeat(3, 1fr)强制生成多行轨道 - 更常见的情况是误把
place-content当成place-items写，结果什么都没居中
单个子项要居中，优先用 place-self: center
比 margin: auto 更可靠，也不依赖轨道尺寸是否为 auto。它直接让那个元素在自己所占的网格区域里横竖居中，无视容器的 place-items 设置。
立即学习“前端免费学习笔记（深入）”；
- 等价于同时写
justify-self: center和align-self: center - 如果该子项跨两行（
grid-row: 1 / 3），它会在合并后的这两行高度内垂直居中，不是按整个容器算 - 在 Safari ≤15.4 中不支持
place-items，但place-self兼容性稍好；IE 可忽略（本身不支持 Grid）
图像或文字内容填满网格区域时的居中要点
Grid 默认对子项应用 align-items: stretch，图像会拉伸变形，文字会撑高单元格。要真正“居中+填充”，得拆开处理：
- 图像：给图片加
width: 100%; height: 100%; object-fit: contain;（保持比例）或object-fit: cover;（填满裁剪） - 文字块：若需在单元格内居中，再套一层
display: flex; align-items: center; justify-content: center;，避免依赖 Grid 的align-items拉伸行为 - 注意
min-height: 100vh必须加在 Grid 容器上，否则内部 flex 布局可能因高度塌陷而失效
最易被忽略的一点：Grid 居中逻辑和子元素是否设置了 width/height 无关，但和它是否“占据独立网格单元”强相关——只要用了 grid-area 或显式行列定位，place-items 就自动让位。
