align-self: center 无效的根本原因是父容器未启用 Flex 布局；它仅对 display: flex/inline-flex 的直接子项生效，且需确保父容器有明确交叉轴尺寸、子项无隐式拉伸（如 align-items: stretch 或 min-height 干扰），必要时可用 margin: auto 替代。
align-self: center 在 flex 项目上无效？先看父容器是不是真的 flex
很多情况下 align-self: center 看起来没反应，根本原因不是写错了，而是父元素压根没启用 Flex 布局。它只对 flex 子项生效，对普通块级子元素完全无作用。
- 父容器必须设置
display: flex或display: inline-flex - 如果父容器是
display: grid或display: block，align-self会被忽略（部分浏览器可能报 warning，但不报错） - 检查 computed styles 时，确认父元素的
display值确实是flex，而不是被其他 CSS 覆盖或继承干扰
垂直居中但不拉伸：align-items 和 align-self 的关系要理清
align-self: center 是单个项目覆盖父级 align-items 的方式，但它不会“阻止拉伸”——拉伸行为其实由 align-items 默认值 stretch 控制。只要父容器设了 align-items: stretch（默认），且子项没设 height 或 min-height，它就会撑满交叉轴。
- 想让某个子项垂直居中且不拉伸，除了加
align-self: center，还必须给它显式设置高度约束，比如height: auto、max-height: 100px，或align-self: center+margin: auto（在单行 flex 中更可靠） - 如果父容器用了
align-items: center，所有子项都会居中，此时再对单个子项设align-self: center就没意义；真要差异化控制，得用align-items: stretch（保持默认）再单独覆盖 - 注意：
align-self对flex-direction: column的影响是水平方向（即 main axis 变成竖向，cross axis 变成横向），此时它控制的是“水平居中”，不是垂直
替代方案：margin: auto 更稳，尤其在单行 flex 容器中
当目标只是让一个 flex 子项在交叉轴上居中且不占满时，margin: auto 往往比 align-self: center 更直接、兼容性更好，也不依赖父容器的 align-items 设置。
- 在单行 flex 容器中（
flex-wrap: nowrap），给子项设margin: auto会同时在主轴和交叉轴居中；若只想垂直居中，可用margin: auto 0 - 它天然避免拉伸：因为 margin 自动分配会基于内容尺寸计算，不会强制撑开
- IE10+ 支持良好，而
align-self在早期 flex 实现（如display: -webkit-flex）中行为不一致 - 示例：
div.container { display: flex; height: 200px; } div.item { margin: auto 0; }
常见错误现象：居中了但高度异常，可能是 min-height 或 box-sizing 搞的鬼
即使 align-self: center 生效、也写了 height: auto，项目仍显得“太高”或“贴顶”，大概率是盒模型或最小高度在捣乱。
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100%或min-height: 100vh会让元素至少撑满容器，覆盖align-self的效果 -
box-sizing: border-box下，padding 和 border 会吃掉 height 分配空间，导致内容区域被压缩，视觉上像没居中 - 父容器没设明确高度（比如
height: auto），而子项又用了align-self: center，此时交叉轴没有参考长度，居中计算失效（表现为按 top 对齐） - 检查是否意外继承了
line-height或vertical-align（对 inline-level flex 子项仍有影响）
flex 垂直居中的关键不在“怎么写 align-self”，而在整个轴线体系是否闭环：父容器有明确 cross size、子项有明确尺寸约束、没有隐式拉伸源干扰。漏掉其中一环，center 就只是个摆设。
