text-center 仅对文本和行内元素生效，mx-auto 需配合固定宽度居中块级元素，d-flex justify-content-center 最灵活且不限子元素类型，响应式需遵循移动优先原则。
用 text-center 类让行内元素或文本水平居中
这是最直接的方式，适用于按钮、链接、标题等行内级内容。它本质是给元素加了 text-align: center，只对子元素中的文本和行内元素生效。
常见错误现象：给一个 div（块级）加了 text-center，但里面放的是另一个没设宽的块级 div，结果完全没变化——因为块级元素不受 text-align 影响。
- 适用场景：居中按钮、表单提示文字、卡片标题
- 不适用场景：居中一个固定宽度的卡片容器、模态框、自定义弹窗
- Bootstrap 5 中该类仍存在，但语义更推荐配合
text-start/text-end使用，避免全局覆盖
用 mx-auto 配合固定宽度实现块级元素居中
这是真正让块级元素自身在父容器中水平居中的方法。原理是把左右外边距设为 auto，前提是该元素有明确宽度（width 或 max-width）。
典型错误：忘了设宽度，只加 mx-auto，结果毫无反应；或者用了 flex 布局后又叠加上去，造成冲突。
- 必须设置
width或max-width，例如width: 300px或使用w-50（占父容器 50%） - 父容器需是块级且非
display: flex（否则mx-auto在 flex 容器中行为不同） - 示例：
<div class="w-50 mx-auto">这个 div 会居中</div>
用 d-flex justify-content-center 居中任意子元素
当父容器能接受 Flex 布局时，这是最灵活、兼容性好（Bootstrap 4/5 均支持）的方式。它不依赖子元素是否定宽，也不要求子元素是行内还是块级。
容易踩的坑：父容器本身高度塌陷（比如内部只有 floated 元素），导致视觉上“没居中”；或者嵌套多层 flex，意外覆盖了 justify-content。
- 父元素加
d-flex和justify-content-center - 子元素无需额外样式，即使它是
div、img或button都能被居中 - 若需垂直居中，可叠加
align-items-center（仅限单行内容）或min-height+flex-direction: column
响应式居中要注意断点类名的覆盖逻辑
Bootstrap 的响应式居中类（如 text-center、justify-content-center）都带前缀，比如 text-md-center 表示从 md 断点起生效。它们不是“切换”，而是“覆盖”——小屏幕没设，大屏幕设了，小屏就按默认左对齐。
典型问题：写了 text-lg-center 却发现手机上看没居中，是因为没写 text-center 覆盖移动端。
- 移动优先原则：先写无前缀类（如
text-center），再按需加text-md-start等取消居中 -
mx-auto本身无响应式变体，如需不同断点不同宽度，得配合w-25 w-md-50 w-lg-75等组合 - Flex 类如
justify-content-md-center是有效的，但别漏掉基础断点
实际项目里最容易被忽略的是：居中目标元素的 display 类型和父容器的布局上下文是否匹配。同一套类名，在 float、flex、grid 或普通文档流下表现完全不同。
