align-self 和 justify-self 仅作用于 display: grid/inline-grid 容器的直接子项，分别控制其在交叉轴和主轴的对齐；主轴方向受 writing-mode 影响，非固定水平；失效常因父容器无高度、子项拉伸受限或替换元素干扰；统一居中应优先用 place-items 或 margin: auto。
align-self 和 justify-self 的作用范围是什么
align-self 控制单个 Grid 子项在**交叉轴**（cross axis）上的对齐，justify-self 控制其在**主轴**（main axis）上的对齐。它们只对直接子元素生效，且仅当父容器是 display: grid 或 display: inline-grid 时才起作用。
注意：这两个属性不会影响 Grid 容器本身的对齐，也不作用于嵌套的 Flex 或 Grid 子容器内部——只管“自己这一格”。
- 如果容器设了
align-items或justify-items，子项的align-self/justify-self会覆盖它 - 默认值都是
auto，即继承父容器的align-items/justify-items - 设为
normal在 Grid 中等价于stretch（拉伸填充单元格）
常见对齐失效的三个原因
写好了 align-self: center 却没反应？大概率掉进以下坑里：
- 父容器没设
height或内容高度不足，导致交叉轴没有“可居中”的空间（比如容器高度由内容撑开，而内容本身只有一行文字） - 子项设置了
align-self: stretch（或未显式设置而继承了父级align-items: stretch），同时又设了固定高度或max-height，此时拉伸被限制，居中就不可见 - 子项是替换元素（如
）且未设vertical-align或height，浏览器可能按基线对齐逻辑干扰 Grid 对齐
justify-self 在不同书写模式下的主轴方向
justify-self 的“主轴”取决于 direction 和 writing-mode，不是永远左右方向：
