.align-self-center 是 Bootstrap 5 中作用于 .col 的单列垂直居中工具类，需父容器 .row 具备足够高度且为 flex 容器；若无效，常见原因是 .row 高度不足、被覆盖 display 或与其他对齐类冲突。
.align-self-center 是 Bootstrap 5 中用于单列垂直对齐的工具类，它作用于 .col 元素本身，而不是整行。它只影响该列在父容器（.row）交叉轴（即 y 轴）上的位置，前提是父容器是 flex 容器——而 Bootstrap 5 的 .row 默认就是 display: flex。
为什么 .align-self-center 有时没反应？
常见错误现象：加了 .align-self-center，但列内容依然顶着上边对齐。
- 父
.row没有足够高度：flex 的align-self需要“可用空间”才能居中；如果.row高度仅由内容撑开（比如只有一行文字），那它就没有垂直方向的剩余空间可分配 -
.col内容本身高度占满整行：此时即使设置了.align-self-center，视觉上也看不出变化 - 误用在非 flex 父容器上：虽然
.row默认是 flex，但如果手动覆盖了display（比如写了display: block），该类就失效 - 与其他对齐类冲突：比如同时写了
.align-items-center在.row上，又在某个.col上写.align-self-start，后者会优先生效，但容易造成预期外的错位
.align-self-center 和 .align-items-center 怎么选？
关键区别在于作用层级和控制粒度：
-
.align-items-center加在.row上：整行所有列统一垂直居中（适合多数列高度差异不大、且希望整体整齐的场景） -
.align-self-center加在某个.col上：仅该列单独居中（适合混合布局，比如一列放 logo、一列放按钮、一列放长文本，只需让按钮列垂直居中） - 两者可共存：
.row设.align-items-start，其中某列设.align-self-center，该列就会突破行级设置，独立居中
必须配合的高度处理技巧
想让 .align-self-center 稳定生效，通常得给父容器“制造空间”：
- 给
.row的直接父容器（如.container或自定义 wrapper）加vh-100或min-vh-100，确保它至少占满视口高度 - 再给
.row加h-100，让它继承父容器高度 - 避免给
.col自身设height: 100%—— 它不会继承 flex 容器高度，除非父级明确设了height（而非min-height或vh） - 更轻量的做法：在目标
.col内部加一层div，用d-flex flex-column justify-content-center把对齐逻辑下沉到列内部，完全绕过.row高度依赖
真正容易被忽略的是：Bootstrap 的对齐类不是“魔法”，它们只是封装了 flex 属性。一旦遇到失效，第一反应不该是换类名或嵌套更多 wrapper，而是打开开发者工具检查 .row 的 computed height 和 display 值——90% 的问题出在这里。
