align-self 未生效最常见的原因是父容器未设置 display: grid 或目标元素非直系子元素；其仅作用于网格容器的直接子元素，且需避免 height 与 stretch 冲突，支持 start/end/center/stretch/baseline 等值，配合 justify-self 和 margin: auto 可实现精确居中。
align-self 覆盖 align-items 时为什么没生效？
最常见的情况是父容器没设 display: grid，或者目标元素不是直系子元素——align-self 只对网格容器的**直接子元素**起作用，嵌套一层 div 就失效。
另一个高频错误：容器设置了 align-items: stretch（默认），而子元素又设置了固定高度（比如 height: 40px），此时 align-self: center 仍会生效，但视觉上可能看不出居中，因为内容本身高度小、位置偏上——建议配合 min-height 或明确容器行高再观察。
- 确认父元素有
display: grid且定义了grid-template-rows或设置了足够高度 - 检查目标元素是否被包装在非网格子元素里（如中间夹了个
section） - 避免同时设置
height和align-self: stretch，二者冲突
align-self 支持哪些值？不同值的实际表现差异
align-self 控制的是交叉轴（默认为垂直方向）对齐，取值包括：start、end、center、stretch、baseline。注意：flex-start 和 flex-end 在 Grid 中也有效，等价于 start / end，但语义上推荐用后者。
baseline 在 Grid 中实际支持有限——它要求子元素内部有可识别的基线（如内联文本），纯块级内容或图片通常不触发预期对齐；若需基线对齐，更稳妥的做法是把相关项设为 display: inline-flex 或改用 Flex 布局。
-
stretch是默认值，会忽略元素自身height、margin，强制填满单元格高度 -
center居中时，若内容本身有上下 padding/margin，会影响视觉中心，建议重置或用box-sizing: border-box -
baseline不要指望它在复杂卡片布局里可靠工作，调试时先换center看是否对齐逻辑本身有问题
如何让单个元素在格子内「精确居中」而非依赖 stretch？
当不想让元素拉伸、又想严格垂直+水平居中时，align-self 和 justify-self 配合 margin: auto 是最轻量的解法。
例如一个图标按钮需要在其 100×100px 的网格单元格中真正居中，且保持固有尺寸：
.icon-btn {
align-self: center;
justify-self: center;
margin: auto;
}
这里 margin: auto 是关键——它在非 stretch 模式下会自动分配剩余空间，比只靠 align-self: center 更可控。注意：该技巧要求元素不能设 width/height 为 100%，否则 margin: auto 失效。
- 必须关闭
stretch行为（显式设align-self: center即可） -
justify-self: center同理处理水平方向，二者缺一不可 - 如果元素含文字，记得检查
line-height是否干扰了垂直位置
justify-self 和 align-self 组合使用时的轴向误区
容易混淆的是：Grid 中 justify-* 管**行轴（默认水平）**，align-* 管**列轴（默认垂直）**。这和 Flex 布局的轴向命名一致，但新手常误以为 “justify = 水平居中，所以 align 也是水平”。
真正决定方向的是容器的 writing-mode 和 direction。比如在 RTL（direction: rtl）下，justify-self: start 会靠右，align-self: start 仍靠上——也就是说，start/end 是逻辑方向，不是绝对方位。
- 不要硬记“justify=左右、align=上下”，而是记住“justify 沿主轴，align 沿交叉轴”
- 用
place-self: center可以同时设置两者，等价于justify-self: center; align-self: center - 调试时临时加
outline: 1px solid red到网格项，能快速看清单元格边界与内容位置关系
margin 和 box-sizing 的隐性干扰。动手前先用浏览器开发者工具选中元素，看 computed 样式里 align-self 是否被正确解析，比反复猜更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
