place-content:center在grid容器上没效果，是因为它只在容器有剩余空间时才生效，需显式设置容器高度且大于网格轨道总高，否则无效。
place-content:center 在 grid 容器上为什么没效果？
因为 place-content 控制的是**整个网格轨道（rows + columns）在容器内的对齐方式**，不是单个子项。它只在网格容器有“多余空间”时才起作用——也就是当所有行高/列宽加起来，小于容器尺寸时。如果你的 grid-template-rows 写了 1fr 1fr，又没设容器高度，或者用了 auto 行高填满内容，那根本没空间可“居中”，place-content:center 就是透明的。
- 必须显式给 grid 容器设置
height或min-height（比如height: 400px），且大于内部轨道总高 - 避免用
grid-template-rows: auto auto或全1fr占满（除非配合minmax()留白） -
place-content是align-content+justify-content的简写，只影响轨道块，不影响子项自身对齐
真正让每个网格项自己居中，该用什么？
每个子项（grid item）的居中，得靠 justify-self 和 align-self，或者统一在容器上设 justify-items / align-items。这才是控制“项怎么贴自己的格子”的属性。
- 让所有项水平+垂直居中格子：
justify-items: center; align-items: center; - 只居中某一项：
justify-self: center; align-self: center;写在该项元素上 - 注意：如果格子本身很窄/很矮（比如
grid-column: span 1但列宽只有 20px），内容撑不开，居中看起来也“没动”——先检查格子尺寸
place-content:center 的典型有效场景
它最常用在“多行网格内容少、想整体居中容器”的布局里，比如响应式卡片列表在大屏上只显示 2 行，但容器有 80vh 高度。
section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px); /* 固定两行 */
height: 80vh;
place-content: center; /* 两行轨道整体在 80vh 里居中 */
}- 关键点：行高固定（
100px）、列数明确、容器高度远大于内容所需高度 - 若改用
grid-template-rows: repeat(2, minmax(100px, auto))，实际高度可能变小，place-content效果就弱了 - Flexbox 里没有对应概念；别拿它和
justify-content: center在 flex 容器里的行为类比
兼容性和 fallback 怎么处理？
place-content 在 Chrome 69+/Firefox 63+/Safari 14.1+ 支持良好，但 Safari 14.0 及更早不支持，IE 完全不支持。不能只靠它做核心布局。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：先写老式拆分属性，再覆盖
place-contentalign-content: center;<br>justify-content: center;<br>place-content: center;
- 如果目标环境含旧 Safari，直接放弃
place-content，老老实实用align-content+justify-content - 不要用
place-content实现“垂直居中单行文字”这种需求——那是align-items或line-height的事
网格对齐本质是两层：轨道怎么放，项怎么贴轨道。很多人卡在第一层就以为第二层没生效，其实只是没留出那一层的空间。
