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，此时拉伸被限制，居中就不可见 - 子项是替换元素（如
<img alt="css Grid布局如何优化内容对齐_通过align-self和justify-self调整对齐" >）且未设vertical-align或height，浏览器可能按基线对齐逻辑干扰 Grid 对齐
justify-self 在不同书写模式下的主轴方向
justify-self 的“主轴”取决于 direction 和 writing-mode，不是永远左右方向：
立即学习“前端免费学习笔记（深入）”；
- 默认
writing-mode: horizontal-tb（横排从左到右）→ 主轴是水平方向 →justify-self: start/end/center表现为左右对齐 - 设了
writing-mode: vertical-rl（竖排从右到左）→ 主轴变成垂直方向 → 此时justify-self: center是上下居中，align-self: center反而变成左右居中 - 因此不要硬记“justify 是水平”，要看实际布局流，调试时用浏览器开发者工具检查 computed 值里的
justify-self解析结果更可靠
替代方案：什么时候不该用 justify-self/align-self
如果目标是让整个 Grid 区域内所有子项统一居中，优先用容器级属性：
- 全容器水平+垂直居中：用
place-items: center（等价于align-items: center; justify-items: center） - 只调某个子项偏移，但又不想破坏拉伸行为：改用
margin: auto（Grid 中 margin auto 在主/交叉轴都有效，且不依赖对齐属性） - 需要响应式对齐切换（比如移动端左对齐、桌面端居中）：用
@container或媒体查询控制justify-items更轻量，避免给每个子项重复加类
单独给几十个子项写 justify-self 不仅冗余，还容易因遗漏导致视觉错位——对齐逻辑越上收，越可控。
