Bootstrap怎么设置Flex容器的子项目在纵向排列时的对齐方式-Bootstrap教程-PHP中文网

父容器必须是flex容器且主轴设为vertical才能使align-items-center生效；因align-items-*始终作用于交叉轴，主轴vertical时交叉轴为horizontal，故align-items-center实现水平居中，垂直居中需用justify-content-center。

父容器必须是 flex 容器且主轴设为 vertical

直接加 align-items-center 没反应？大概率是因为父容器没启用 flex，或者主轴方向仍是默认的 horizontal（flex-direction: row）。bootstrap 的 align-items-* 类只在交叉轴上生效，而交叉轴方向由主轴决定：主轴 vertical → 交叉轴就是 horizontal（此时 align-items-* 控制的是左右对齐）；主轴 horizontal → 交叉轴才是 vertical（此时才控制上下对齐）。

所以要让子项目纵向堆叠（即主轴 vertical），必须显式加 flex-column：

<div class="d-flex flex-column align-items-center justify-content-center h-100">
  <div>第一项</div>
  <div>第二项</div>
  <div>第三项</div>
</div>

d-flex 启用 Flex 布局（必不可少）
flex-column 把主轴设为 vertical，此时 justify-content-* 控制上下分布，align-items-* 控制左右对齐
h-100 或 min-vh-100 提供垂直空间，否则 justify-content-center 无参照系

align-items-* 在 vertical 主轴下控制的是水平对齐

很多人误以为 align-items-center 在纵向布局里还能“垂直居中”，其实不是——它始终作用于交叉轴。当主轴是 flex-column，交叉轴就是水平方向，所以：

align-items-start → 所有子项左对齐
align-items-center → 所有子项水平居中（视觉上“居中”其实是左右居中）
align-items-end → 所有子项右对齐
align-items-stretch → 子项宽度拉满父容器（默认行为，但需子项未设固定 width）

如果想让纵向排列的子项“上下居中”，该用的是 justify-content-center，不是 align-items-center。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

单个子项需要特殊对齐？用 align-self-* 覆盖

比如一列纵向元素中，只有最后一个按钮要右对齐，其他保持居中：

<div class="d-flex flex-column align-items-center justify-content-center h-100">
  <div>标题</div>
  <div>说明文字</div>
  <button class="btn btn-primary align-self-end">操作</button>
</div>

align-self-end 直接加在目标子项上，仅影响它自己
它只在父容器是 Flex 且主轴明确时生效（d-flex + flex-column 或 flex-row）
注意：align-self-stretch 在子项有固定 width 时会失效；align-self-baseline 对纯文本块意义不大，更适合混排图标+文字场景