align-self没反应，首要检查父容器是否设display: grid/inline-grid、子元素是否在有高度的网格单元内、是否被absolute/floating/display: contents脱离网格流。
align-self 为什么没反应？先看这三件事
写了 align-self: center 却没居中，大概率不是属性写错了，而是前提条件没满足：
- 父容器没设
display: grid或display: inline-grid—— 这个必须有，否则align-self在网格上下文里根本不会生效 - 子元素没落在一个「有高度的格子」里 —— 比如
grid-template-rows是auto或没定义，浏览器可能把行高压缩到内容高度，那“居中”就无从谈起 - 子元素被
position: absolute、float或display: contents脱离了网格流 —— 它已经不算网格项了，align-self自然失效
align-self 的取值和实际效果差异
align-self 控制的是项目在它**所占网格区域（grid cell）的块轴方向（默认是垂直方向）**上的对齐，不是整个容器。它的行为和 align-items 一致，只是粒度更细：
-
center：在格子内垂直居中 —— 最常用，但前提是格子本身有可居中的空间 -
start/end：分别对齐格子顶部/底部 —— 注意不是容器顶部/底部，是它自己那个格子的起止边缘 -
stretch：默认值，拉伸填满整行高 —— 如果你设了固定高度（比如height: 40px），这个就会失效 -
baseline：多用于文本类项目对齐基线，比如一组带图标的按钮需要文字底部对齐
跨行/跨列时 align-self 还管用吗？
管用，而且特别有用。哪怕项目用了 grid-row: span 2 或 grid-column: span 3，它依然占据一个逻辑上的「合并单元格」，align-self 作用的就是这个合并后的区域。
常见场景：
- 一个标题横跨三列，但你想让它在合并后的区域里垂直居中：
align-self: center - 一个卡片占两行，但内容想贴顶显示：
align-self: start - 配合
justify-self: end，实现右上角悬浮按钮布局
注意：此时 align-self 对齐的是整个跨行区域的高度，不是容器总高度 —— 别指望靠它把元素“撑”到容器正中间。
和 margin: auto 冲突吗？怎么配合用？
不冲突，但行为优先级不同。align-self: center 是网格层面对齐；margin: auto 是盒模型层面对齐。当 align-self 是 stretch（默认）时，margin: auto 会被忽略；一旦改成 center、start 等非拉伸值，margin 就能生效。
典型组合：
-
align-self: center; margin: auto 0;—— 垂直居中 + 水平方向由其他规则控制（比如justify-self） -
align-self: start; margin-top: 16px;—— 顶部对齐后，再加一点上边距
真正容易被忽略的是：align-self 只负责“在格子里怎么摆”，而格子有多大、在哪，得靠 grid-template-rows、grid-row 和容器自身尺寸共同决定 —— 居中不是魔法，是层层约束下的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
