最稳的纯class居中方案是d-flex+justify-content-center+align-items-center+min-vh-100；text-center仅对行内元素有效，mx-auto需块级元素且有明确宽度；align-middle对div无效，因vertical-align不适用于普通块级元素。
直接用 Bootstrap 自带的工具类就能做到，但必须分清“水平居中”和“垂直居中”是两件事，且绝大多数场景下——d-flex + justify-content-center + align-items-center 是唯一真正可靠的纯 class 解法。
只靠 text-center 或 mx-auto 能不能水平居中？
能，但有严格前提：
-
text-center只对行内内容（如文字、<span>、<img>）有效，对<div>这类块级元素本身无效 -
mx-auto要求目标元素是块级且有明确宽度（比如w-50或col-6），否则浏览器无法计算左右 margin - 如果父容器是
.row，它默认不是 flex 容器，mx-auto在子.col上可能失效；得先加d-flex或改用justify-content-center
为什么 align-middle 对 div 垂直居中完全没用？
因为 align-middle 本质是 vertical-align: middle，它只在两种上下文中起作用：
- 表格单元格（
display: table-cell）内 - 行内/行内块元素（
inline/inline-block）之间对齐
给一个普通 <div> 加 align-middle，等于没写——浏览器根本不识别这个对齐意图。别试了。
立即学习“前端免费学习笔记（深入）”；
最稳的纯 class 垂直+水平居中组合是什么？
必须同时满足三个条件：父容器是 flex、主轴方向明确、父容器有高度。推荐写法：
<div class="d-flex justify-content-center align-items-center min-vh-100"> <div class="w-50 p-4 bg-light">我要居中</div> </div>
-
d-flex：激活 flex 布局（关键！没有它，后面两个 class 都不生效） -
justify-content-center：控制主轴（默认是水平）居中 → 水平居中 -
align-items-center：控制交叉轴（默认是垂直）居中 → 垂直居中 -
min-vh-100：确保父容器至少占满视口高度，避免因高度塌陷导致垂直居中失效
注意：h-100 不够可靠，它依赖父级已有高度；min-vh-100 是更安全的选择。
想让多个 div 垂直堆叠再整体居中，该加什么 class？
默认 d-flex 是水平排列，所以必须显式切换主轴方向：
- 加
flex-column：把主轴从水平改成垂直，子元素自然上下堆叠 - 保留
justify-content-center：让整列内容在垂直方向上居中（即上下留白相等） - 保留
align-items-center：让每个子元素在水平方向上居中（即不靠左）
漏掉 flex-column，所有子 <div> 会挤成一行——这不是 bug，是 flex 默认行为。
真正容易被忽略的是：所有这些居中能力都依赖父容器有可测量的高度。哪怕只差一个 min-vh-100，align-items-center 就会静默失效，你不会看到任何报错，只会发现内容贴在顶部。
