place-self无效的首要原因是子元素未被分配到具体网格单元，即未显式指定grid-column/grid-row或父容器未定义grid-template-rows/columns，导致其退化为普通流内盒子而非网格项目。
place-self 无效，先确认子元素是否被分配到具体网格单元
place-self 只对「已明确归属某个网格单元」的子元素起作用。如果子项没写 grid-column 或 grid-row，又没被隐式网格线捕获（比如父容器没定义 grid-template-rows），它就只是流内普通盒子，不是真正的网格项目——此时 place-self 完全被忽略。
常见错误现象：place-self: center 写了但元素纹丝不动；开发者工具里看到该属性被标记为“inactive”或压根没出现在 computed 样式中。
- 检查父容器是否设置了
grid-template-rows或grid-template-columns（哪怕只有一行一列，也得显式写出来，比如grid-template-rows: 1fr） - 给目标子元素加上
grid-column: 1或grid-row: 1，强制它进入第一轨道，避免依赖隐式网格行为 - 若用
grid-area，确保命名区域已在父容器中通过grid-template-areas定义，否则该值无效 - React/Vue 中注意 Fragment 或额外包装
<div>会让目标元素脱离直接子代层级，place-self失效
单列/单行网格中 place-self 看似无效的真实原因
当父容器只有 grid-template-columns: 1fr，且子项未指定 grid-column 时，它默认占满整列——没有「空余空间」供 justify-self（即 place-self 的第二个值）发挥对齐作用。这不是 bug，是 Grid 对齐逻辑的设计前提：它对齐的是「所在轨道内的剩余空间」，不是整个容器宽度。
典型表现：place-self: center start 想让元素垂直居中+水平靠左，结果却像没生效——其实是它已经在轨道最左，而轨道太宽，视觉上“看不出左对齐”。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：显式绑定列范围，如
grid-column: 1 / 1，把子项锁在第一列内 - 解决方法二：增加列数，例如
grid-template-columns: 100px 1fr 100px，再让子项只占中间列（grid-column: 2） - 解决方法三：若必须单列且只需水平控制，改用
text-align: center（仅适用于内联内容）或margin: 0 auto（需轨道尺寸为auto或fit-content）
place-self 在 Flex 容器里“只动一半”的原因
Flex 是一维布局，place-self 虽然语法上允许使用，但浏览器只尊重第一个值（对应 justify-self，即主轴对齐），第二个值（对应 align-self）会被静默忽略。所以你写 place-self: center end，实际只触发 justify-self: center，垂直方向完全不受控。
这不是兼容性问题，而是规范行为。真要控制 Flex 项目的交叉轴（垂直）对齐，请单独写 align-self: end。
- Flex 下
place-self: center等价于justify-self: center（主轴居中），align-self不变 - Grid 下
place-self: center才真正同时作用于两个轴 - 别指望用
place-self统一处理 Flex 和 Grid 场景——它们的底层对齐模型根本不同
为什么加了 place-self 还是不居中？检查高度约束和拉伸干扰
place-self: center 需要「可居中的空间」。如果子元素自身设了 height: 100%、min-height: 100vh，或父容器 align-items: stretch（默认值）且子项没覆盖它，那子项就会撑满轨道，失去垂直对齐的余量。
另一个干扰源是 stretch 行为：当 place-self 值为 stretch（或未设且父级 align-items 为 stretch），子项会忽略自身 width/height，强行填满轨道——这时 center 就没意义了。
- 确保父容器有明确的交叉轴尺寸，例如
min-height: 300px或height: 100vh - 子元素上显式写
align-self: center（或place-self: center），避免被父级align-items: stretch覆盖 - 若子项是图片等替换元素，记得加
min-width: 0或width: fit-content，防止其固有尺寸阻断对齐
最容易被忽略的一点：place-self 的生效前提是「该元素确实是网格项目」，而不是你以为它是——哪怕只差一个 grid-column，它就退化成普通块级元素，所有对齐属性都归零。调试时优先看 computed 样式里的 display 和 grid-column 是否如预期解析。
