place-self 不生效的首要原因是父容器未设置 display: grid 或 inline-grid；其次可能是父容器无高度、place-self 被 align-items 覆盖、子项非直接子元素、跨行导致居中区域不符预期，或 margin: auto 干扰。
place-self 不生效，大概率是父容器没设 display: grid
写了 place-self: center 却完全没反应？先别调样式，直接检查父元素的 computed style —— 如果 display 不是 grid 或 inline-grid，那所有 place-self、justify-self、align-self 都会被浏览器静默忽略。Grid 布局不是“自动启用”的，它必须显式触发。
常见误操作：
- 只加了
place-self，但父级仍是display: block或flex - 父级用了
float、position: absolute或display: contents，破坏了 Grid 布局上下文 - 目标元素被包在一层无样式的
<div>或 React Fragment 里，导致它不是网格容器的**直接子元素**
place-self 生效但居中不可见，可能是交叉轴没尺寸
place-self: center 是在网格轨道（track）内居中，不是在视口里居中。如果父容器高度为 auto，且内部内容又没撑开高度，那垂直方向就“没空间可居中”——浏览器算不出中心在哪，结果就是贴顶显示。
解决办法取决于你用的网格定义方式：
立即学习“前端免费学习笔记（深入）”；
- 用了
grid-template-rows: 1fr？确保父容器有高度约束，比如min-height: 100vh或height: 400px - 没定义任何
grid-template-rows？那默认行高由内容决定，此时加min-height比加height更安全 - 子项本身设了
height或min-height？这会压缩可居中的剩余空间，有时反而让居中“看起来失效”
place-self 被 align-items / justify-items 覆盖了
父容器如果设了 align-items: stretch（Grid 默认值），它会强制覆盖子项的 align-self，除非子项明确写 align-self: center（place-self 等价于两者同时设）。但如果你在父级写了 align-items: flex-start，再在子项写 place-self: center，它依然有效 —— 因为 align-self 优先级高于 align-items。
容易混淆的点：
-
place-items: center是作用于**所有子项**的批量设置，和place-self完全不同；写了前者又写后者，后者仍生效 - 如果子项还带
margin: auto，在 Grid 中它只在轨道尺寸为auto或fit-content时才起作用，不如place-self可靠 - 子项是
display: grid或flex容器？place-self只控制它在父网格单元里的位置，不影响其内部布局
place-self 在跨行/跨列时表现和预期不一致
place-self: center 总是在它所占的**网格区域（grid area）内居中**，而不是整个容器。比如你写了 grid-row: 1 / 3，那它就在两行合并后的高度里垂直居中，不是容器总高度的中间。
这意味着：
- 如果网格轨道本身高度不均（比如
grid-template-rows: 20px 1fr），跨行后居中位置会偏上或偏下 - 想在整个容器中绝对居中，不要依赖跨行，而是让子项占满单个轨道，并确保该轨道尺寸可计算（如
1fr或固定值） - 调试时拆开写
justify-self: center和align-self: center，能更快定位是水平还是垂直方向出问题
最常被忽略的其实是第一点：没有 display: grid，后面所有属性都是无效代码。真要排查，打开 DevTools 的 Elements 面板，直接看父元素的 computed display 值，比反复改 CSS 更快。
