Bootstrap 的 .container 默认已通过 margin: auto 水平居中，额外添加 mx-auto 会覆盖默认样式导致偏移；mx-auto 应用于其内部块级子元素（如按钮、图片、卡片），而非容器自身。
用 .container 配合 mx-auto 实现水平居中
Bootstrap 的 .container 默认就是水平居中的，但前提是它没被父容器的 text-align: center 或 display: flex 等样式干扰。真正需要手动干预的，往往是自定义宽度的 div 或非响应式容器。
最稳妥的做法是：给容器加 mx-auto（左右外边距自动），并显式设置 width 或 max-width：
<div class="w-50 mx-auto"> 这个 div 宽度为 50%，且水平居中 </div>
-
mx-auto只对display: block元素生效，如果容器是inline或flex，得先加d-block - 别依赖
text-center居中块级容器——它只影响内联内容，对容器自身无效 - 在 Bootstrap 5+ 中，
.container已内置margin-left: auto; margin-right: auto，所以单独使用时无需额外类
用 justify-content-center 在 Flex 布局中居中
当你把父容器设为 flex（比如用 d-flex），子容器的居中就由 Flex 属性控制，此时 mx-auto 失效。
常见错误是只加 text-center 或 mx-auto，结果完全没反应——因为 Flex 子项的 margin 自动值会被忽略。
- 父容器必须有
d-flex，再加justify-content-center才能水平居中子项 - 若要垂直+水平居中，补上
align-items-center，但注意这要求父容器有明确高度（比如min-height: 100vh） - 子容器默认是
flex: 0 0 auto，不会撑满，所以mx-auto不起作用
避免 text-center 误用导致的“假居中”
text-center 只改变行内内容（文字、span、img 等）的对齐方式，对块级容器本身的位置毫无影响。很多人看到文字居中了，就以为容器也居中了，其实只是内容被挤到了左边容器的中间而已。
- 测试方法：给容器加
border: 1px solid red，一眼看出它是否真在页面中央 - 如果容器里只有文字，又用了
text-center，那文字居中 ≠ 容器居中 - 响应式场景下，
text-center还可能被text-md-start等断点类覆盖，行为更难预测
响应式居中要注意断点类的覆盖逻辑
Bootstrap 的响应式间距类（如 mx-sm-auto、mx-md-0）是按断点顺序覆盖的，不是叠加。比如 mx-auto mx-md-0 表示：小屏幕居中，中屏及以上取消居中。
- 写响应式居中时，优先用
mx-{breakpoint}-auto，而不是靠媒体查询重写 CSS - 别混用
mx-auto和ms-auto me-auto—— 后者在某些旧版 Bootstrap 中不被识别 - 在
.container-fluid内部做居中，要小心它本身已占满宽度，此时需嵌套一层带固定宽的div再加mx-auto
居中最容易被忽略的是 display 类型和父容器布局模式的冲突——Flex、Grid、普通文档流各自有一套居中逻辑，混用时得先确认当前上下文的渲染机制。
