align-self居中失效主因是父容器未设display: grid/inline-grid、align-items: stretch覆盖子项设置、或容器交叉轴无明确尺寸。需确保容器有高度约束、关闭stretch拉伸，并注意place-self兼容性。
align-self 居中失效的常见原因
直接给 Grid 项目设 align-self: center 却没效果？大概率是父容器没启用 Grid 布局，或子项被其他对齐方式覆盖。Grid 的 align-self 只在显式定义了 display: grid 或 display: inline-grid 的容器下生效，且仅作用于单个子项在**交叉轴**（默认为垂直方向）上的对齐。
容易踩的坑：
- 父容器用了
display: flex，却误以为align-self在 Grid 下也通用 - 子项本身设置了
height或min-height，导致没有“可居中的剩余空间” - 父容器的
align-items设为stretch（默认值），它会强制覆盖子项的align-self，除非子项明确声明非auto
让 align-self 生效的关键前提
必须确保 Grid 容器具备明确的交叉轴尺寸约束，否则浏览器无法计算“居中”的基准。比如容器高度为 auto、又没内容撑开，那即使写了 align-self: center，实际也没空间可居中。
实操建议：
- 给 Grid 容器设置明确的
height或min-height（如min-height: 100vh） - 确认容器未被
overflow: hidden或父级限制裁剪掉可用空间 - 避免同时设置
grid-auto-rows为固定值（如50px）而子项内容超出——这会导致拉伸或溢出，掩盖居中效果
不拉伸项目的正确写法
默认情况下，Grid 子项在交叉轴上会 stretch（拉伸填满行高）。要禁用拉伸、只居中内容本身，需两步配合：
- 父容器设
align-items: flex-start或align-items: start（防止全局拉伸） - 目标子项单独设
align-self: center - 子项自身不要设
height: 100%或align-self: stretch
示例：
.grid {
display: grid;
min-height: 200px;
align-items: start; /* 关键：关闭默认 stretch */
}
.item {
align-self: center; /* 仅此一项垂直居中 */
}
替代方案：justify-self + align-self 联合控制
如果需要同时水平+垂直居中，justify-self: center（主轴）和 align-self: center（交叉轴）可以共存。但注意：只有当容器启用了二维网格（即至少有一行一列定义），且子项未被 grid-column/grid-row 锁死位置时，这种居中才稳定。
更稳妥的做法是结合 place-self: center（等价于两者同时设），但需留意兼容性：place-self 在 Safari 14.1+ 才完全支持，旧版需回退为双属性写法。
复杂点在于：一旦子项参与了 grid-area 布局或跨行/跨列，align-self 仍有效，但视觉居中可能受轨道尺寸影响——这时得检查 grid-template-rows 是否包含 minmax() 或 fr 单位，而非全用 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
