place-items: center是最稳的居中方案，前提是父容器必须设为display: grid；它等价于justify-items和align-items同时设center，作用于所有直接子元素，不依赖剩余空间，且兼容性良好。
直接用 place-items: center，前提是父容器必须是 display: grid。 其他写法要么无效、要么作用对象错了——比如 place-content 居中的是整个网格轨道，不是你想要的那个子元素。
为什么 place-items: center 是最稳的选择
它等价于同时设置 justify-items: center 和 align-items: center，作用目标明确：所有直接子元素的对齐盒（alignment box）。不管子元素是单个 div 还是多个，也不管它有没有固定宽高，只要父容器是 grid，就能生效。
- 不需要定义
grid-template-rows或grid-template-columns - 不依赖容器是否有“剩余空间”——
place-content就卡在这点上 - 兼容性好（Chrome 66+、Firefox 61+、Safari 12.1+，Edge 79+）
- 如果子元素自己写了
align-self或justify-self，会覆盖place-items，这点要留意
justify-content 和 align-content 为什么经常失效
这两个属性只在 Grid 容器里存在多行或多列轨道（tracks），且容器尺寸大于所有轨道总和时才起作用。例如：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 至少 3 行 */
width: 300px; height: 300px;
justify-content: center;
align-content: center;
}但如果你只放一个子元素，又没显式声明行列模板，Grid 默认只生成 1 行 1 列——此时 align-content 根本不触发，justify-content 也仅影响轨道内对齐，不会把子元素推到容器中心。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：给单子项 Grid 容器加
justify-content: center; align-content: center，结果毫无反应 - 这不是 bug，是规范行为：它们对“轨道布局”起效，不是对“子元素定位”起效
- 想靠它们居中？先让 Grid 产生多轨道（比如加
grid-auto-rows: 100px或grid-template-columns: 1fr 1fr）
什么时候该换别的方案
如果父容器不能改 display: grid（比如继承自第三方组件、或需要兼容 IE11），就别硬套 place-items。这时候更现实的替代是：
- Flex 方案：
display: flex; justify-content: center; align-items: center—— 兼容性更好，代码几乎一样简洁 - 绝对定位 +
transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)—— 适合已知父容器position: relative的场景 - 注意：
margin: auto在 Grid 中只对子元素生效（且需它有明确宽高或fit-content行为），不如place-items可靠
真正容易被忽略的点是：Grid 居中效果是否生效，第一眼要确认父容器是否真的进入了 Grid 上下文——display: grid 必须显式声明，且不能被后代的 display: contents 或其他 display 值意外中断。一旦漏掉这行，后面所有居中属性都只是摆设。
