CSS Grid的place-self为什么不生效？

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 布局不是“自动启用”的，它必须显式触发。

常见误操作：

1. 只加了 place-self，但父级仍是 display: block 或 flex
2. 父级用了 float、position: absolute 或 display: contents，破坏了 Grid 布局上下文
3. 目标元素被包在一层无样式的 <div> 或 React Fragment 里，导致它不是网格容器的**直接子元素**

place-self 生效但居中不可见，可能是交叉轴没尺寸

place-self: center 是在网格轨道（track）内居中，不是在视口里居中。如果父容器高度为 auto，且内部内容又没撑开高度，那垂直方向就“没空间可居中”——浏览器算不出中心在哪，结果就是贴顶显示。

解决办法取决于你用的网格定义方式：

1. 用了 grid-template-rows: 1fr？确保父容器有高度约束，比如 min-height: 100vh 或 height: 400px
2. 没定义任何 grid-template-rows？那默认行高由内容决定，此时加 min-height 比加 height 更安全
3. 子项本身设了 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。

容易混淆的点：

1. place-items: center 是作用于**所有子项**的批量设置，和 place-self 完全不同；写了前者又写后者，后者仍生效
2. 如果子项还带 margin: auto，在 Grid 中它只在轨道尺寸为 auto 或 fit-content 时才起作用，不如 place-self 可靠
3. 子项是 display: grid 或 flex 容器？place-self 只控制它在父网格单元里的位置，不影响其内部布局

place-self 在跨行/跨列时表现和预期不一致

place-self: center 总是在它所占的网格区域（grid area）内居中，而不是整个容器。比如你写了 grid-row: 1 / 3，那它就在两行合并后的高度里垂直居中，不是容器总高度的中间。

这意味着：

1. 如果网格轨道本身高度不均（比如 grid-template-rows: 20px 1fr），跨行后居中位置会偏上或偏下
2. 想在整个容器中绝对居中，不要依赖跨行，而是让子项占满单个轨道，并确保该轨道尺寸可计算（如 1fr 或固定值）
3. 调试时拆开写 justify-self: center 和 align-self: center，能更快定位是水平还是垂直方向出问题

最常被忽略的其实是第一点：没有 display: grid，后面所有属性都是无效代码。真要排查，打开 DevTools 的 Elements 面板，直接看父元素的 computed display 值，比反复改 CSS 更快。