place-content: center 对 SPA 无效，因其仅对多行/多列 Grid 内容区域起作用；SPA 根容器通常单行单列且内容撑满，无剩余空间可居中。
place-content: center 不能让单页应用（SPA）整体居中——它只在 Grid 容器有多行/多列轨道且内容区域未填满父容器时才起作用。 直接加在 body 或根容器上，几乎总是无效。
为什么 place-content: center 对 SPA 布局基本没用
单页应用通常只有一个根容器（比如 #app），内部是动态渲染的子树，而非显式定义的多行多列网格轨道。此时：
-
place-content控制的是「所有行和列围成的内容区域」在容器内的对齐，不是容器自身位置 - 若没写
grid-template-rows或grid-template-columns，浏览器默认生成 1 行 1 列 → 内容区域 = 容器尺寸 → 无剩余空间可“居中” - 即使写了
display: grid，但子项设置了width: 100%或min-height: 100vh，也会把内容区域撑满，place-content失效
真正该用 place-items: center 的场景
想让 SPA 根容器里的**第一个子元素**（如 .layout 或 .main-view）视觉上居中，place-items: center 更直接可靠：
- 必须确保父容器（即 SPA 根节点）已设
display: grid - 给目标子元素加
place-self: center（比place-items更精准，不干扰其他子项） - 父容器需有明确高度参考，例如：
min-height: 100vh；仅靠height: auto会塌陷 - 避免嵌套 wrapper：React 的
<Fragment>或多余<div>会让目标元素不再是 grid 直接子项，place-self失效
兼容性与 fallback 必须考虑
place-content 和 place-items 在 Safari 10.1+、Chrome 68+、Firefox 63+ 支持，但 IE 完全不支持。若项目需兼容旧环境：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
place-content做布局主干，它本就不是为“容器定位”设计的 - 用
display: flex+justify-content: center+align-items: center作为降级方案，加在 SPA 根容器的**父级**上（如body） - 若根容器无法改 display（如被第三方 UI 库锁定），改用
position: fixed+inset: 0+margin: auto（需明确宽高）
真正卡住人的，从来不是属性写错，而是没分清：你调的到底是“网格轨道怎么排”，还是“子元素在格子里怎么坐”，或是“整个模块在页面里放哪”。place-content 只管第一种，而 SPA 居中要解决的是第三种——得换地方下手。
