place-content: center 仅对 display: grid 或 inline-grid 容器生效，需确保容器有明确尺寸和多余空间；它控制网格轨道组整体居中，非子项内容居中，且不兼容旧版 safari。
place-content: center 没生效？先看容器是不是 Grid
它只在 display: grid 或 display: inline-grid 容器上起作用，对 display: flex、block 或没写 display 的元素完全无效。浏览器会静默忽略该声明，不报错也不提示。
- 常见翻车点：父容器写了
display: flex，又加了place-content: center——后者直接被丢弃 - 检查是否误用了
inline-grid：行内网格默认不占满宽度，place-content在视觉上几乎看不出效果，优先改用display: grid - 如果容器是动态生成的（比如 React 组件），确认 CSS 类名拼写正确，且样式未被更高优先级规则覆盖
place-content 和 place-items 别混用，它们管的根本不是一回事
place-content 控制的是「网格轨道组」在容器内的位置，也就是所有行和列构成的整体区块怎么摆；而 place-items 控制的是每个子元素在各自单元格里的对齐方式。两者作用层级不同，同时设置时不会叠加，反而容易互相干扰。
- 想让整个 3×3 卡片网格在父容器中居中（比如父容器高 600px，网格只占 300px）→ 用
place-content: center - 想让每个卡片内部的图标/文字在各自格子里居中 → 用
place-items: center - 若网格只有一行一列（比如单个登录框），且没定义
grid-template-rows或grid-template-columns，则只有隐式单轨道，place-content没空间可分配，此时应改用justify-content: center; align-content: center或直接套 Flex 父容器
place-content: center 要生效，容器得有“多余空间”可分配
它不是让内容居中，而是让轨道之间的空隙被重新分配。如果容器高度刚好被网格填满，或子元素撑开了全部空间，place-content 就没有作用对象。
- 必须确保容器有明确尺寸：如
height: 100vh、min-height: 400px，或由父容器提供 BFC 上下文（如overflow: hidden） - 避免子元素用
height: 100%或grid-row: 1 / -1填满整个网格——这会让轨道无剩余空间，place-content失效 - 临时调试建议：给容器加
outline: 2px solid red，观察其真实尺寸是否符合预期
兼容性与降级方案要盯紧 Safari 和旧版 Chrome
place-content 在 Safari 10.1+、Chrome 68+、Firefox 63+ 支持良好，但 Safari 10–11 行为不稳定，IE 完全不支持。不能靠 UA 判断，要用特性检测。
- 推荐用
@supports (place-content: center)包裹现代写法，里面再写降级规则 - 安全降级组合：
display: flex; justify-content: center; align-items: center（放在父容器上，不是 grid 容器本身） - 如果必须在 grid 容器内实现类似效果且需兼容 Safari 10，可用
grid-template: 1fr / 1fr; place-items: center配合单子项，视觉等效但语义不同
place-content 不解决“容器自身没尺寸”的问题。哪怕语法全对、浏览器支持，只要容器高度是 0 或由空内容撑开，就根本看不到任何居中效果。先保容器有可测量的空间，再谈对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
