place-items: center 能实现子项在网格单元格内横竖居中，但前提是父容器设为 display: grid 或 inline-grid、子元素为直接子代、未被 align-self/place-self 覆盖，且父容器有明确高度。
place-items: center 能一步到位实现居中，但只在它真正生效的前提下——不是所有写了它的地方都会如你所愿“把元素塞到容器正中间”。
为什么 place-items: center 经常没反应
最常见原因是父容器根本不是 Grid 容器。这个属性只对 display: grid 或 display: inline-grid 的直接子元素起作用，其他布局（flex、block、absolute）完全无视它。
- 检查父元素是否真的有
display: grid—— 仅写place-items不会自动触发网格模式 - React/Vue 中容易因
Fragment、多余<div>套嵌，导致目标元素不是直接子代，此时place-items对它无效 - 子元素设置了
align-self: start或place-self: start，会覆盖place-items的值 - 父容器高度塌陷（比如没设
height或min-height），即使对齐逻辑正确，视觉上也像“没动”
place-items: center 和 align-items: center 的实际差别
align-items: center 在 Grid 中常被误认为“让子元素在容器里垂直居中”，其实它只控制子项在**各自所在行轨道（grid row track）内的块轴对齐**。
- 当
grid-template-rows: 1fr且容器有明确高度时，align-items: center看起来像整体居中，本质是子项在那个1fr行里居中 - 当有多行（如
grid-template-rows: 100px 1fr 80px），每个子项会在自己被分配到的那行里居中，不是按容器总高算 -
place-items: center是justify-items: center+align-items: center的简写，同时管水平和垂直方向，但依然遵循“按单元格对齐”原则
只想居中一个元素？别用 place-items
它天生是批量操作属性。要精准控制单个子项，直接给它加 place-self: center，或拆成 justify-self: center + align-self: center。
立即学习“前端免费学习笔记（深入）”；
-
place-self: center只影响当前元素，其余子项照常按网格流排列 - 比
margin: auto更可靠——后者在 Grid 中仅当轨道尺寸为auto或fit-content时才生效 - 若该元素跨多行（如
grid-row: 1 / 3），align-self: center会让它在这两行合并后的轨道内垂直居中，不是整个容器高度
兼容性与降级陷阱
旧版 Safari（≤15.4）不支持 place-items，需回退到 align-items: center; justify-content: center（注意：这里是 justify-content，不是 justify-items）。
- IE 完全不支持
place-items，连带不支持现代 Grid，实际项目中基本绕开 IE 即可 - 不要指望
place-content: center替代它——place-content控制的是轨道整体在容器内的对齐，不是子元素本身 - 如果父容器用了
grid-template-areas但某子元素没匹配到命名区域，它会被挤到隐式网格末尾，place-items仍会生效，但位置已脱离预期
真正容易被忽略的点是：它对齐的是“网格单元格内”的内容盒，不是容器可视区；而开发者想要的，常常是后者。这时候得配合 place-content: center 或换用 Flex，而不是硬调 place-items。
