mx-auto 在 flex 容器中失效是因为主轴无剩余空间，需满足父容器有空余宽度、子项未占满且左右有兄弟元素；推荐用 justify-content-center 主动居中。
mx-auto 在 flex 容器里失效，不是类写错了，而是它根本没机会生效——flex 布局下，子元素的 margin 行为被重新定义，必须满足“主轴有剩余空间”这个前提。
为什么 mx-auto 在 d-flex 父容器中常不起作用
Flex 容器默认用 justify-content: flex-start，所有子项从左贴边排列；此时即使你给某个子元素加了 mx-auto，只要它左边没其他兄弟元素“占位”，浏览器就不会认为主轴上有“剩余空间”可分配，margin-inline: auto 就被忽略。
- 常见翻车场景：
<div class="d-flex"><button class="btn mx-auto">点我</button></div>—— 单个子项，mx-auto无效 - 父容器用了
justify-content: space-between或flex-end，也会挤压主轴空间，导致mx-auto失效 - 子元素本身设了
flex: 1或width: 100%，填满主轴后自然无空间可居中
用 justify-content-center 替代 mx-auto（推荐）
这是最直接、语义最清晰的解法：居中意图明确写在容器上，不依赖子元素状态，也不怕兄弟节点增减。
- 适用于单按钮、多按钮、文字+图标等任意组合
- 响应式安全：
justify-content-center在所有断点下行为一致 - 若需同时垂直居中，加
align-items-center即可，无需额外高度控制（但注意：父容器仍需有高度上下文，比如min-height: 100vh） - 示例：
<div class="d-flex justify-content-center"><button class="btn btn-primary">提交</button></div>
保留 mx-auto 的可行条件
如果你非要用 mx-auto（比如要兼容已有结构或需要“推挤”效果），必须同时满足以下三点：
- 父容器是
d-flex，且主轴方向留有明确剩余空间（即子元素总宽度 - 子元素不能是
flex: 1、width: 100%或btn-block这类占满类 - 左右至少各有一个兄弟元素（哪怕只是空
<div class="me-auto"></div>），用来“锚定”两端，让中间项获得居中资格 - 示例：
<div class="d-flex"> <div class="me-auto"></div> <button class="btn">Logo</button><div class="ms-auto"></div> </div>
真正容易被忽略的是：Flex 下的居中逻辑和块级流完全不同——不是“给元素加个类就居中”，而是“由容器决定空间如何分配”。mx-auto 是个被动响应者，justify-content 才是主动调度者。别在 Flex 容器里徒劳调试 mx-auto，先看父容器有没有把空间让出来。
