单个按钮用d-block mx-auto最稳妥，因按钮默认为行内元素，mx-auto仅对块级且宽度明确的元素生效；按钮组需外包d-flex justify-content-center容器，text-center仅影响行内内容，不可靠。
直接给按钮加 text-center 或 mx-auto 都可能失效，关键看父容器是否为 flex 布局、按钮自身 display 类型，以及你到底想居中“单个按钮”还是“按钮组”。
单个按钮用 mx-auto d-block 最稳妥
这是 Bootstrap 5 中最轻量、兼容性最好的单按钮水平居中方式。它不依赖父容器的文本对齐设置，也不怕被 flex 干扰。
- 必须同时加
d-block：按钮默认是inline元素，mx-auto只对块级元素生效 - 别在 flex 容器里重复用：
d-flex justify-content-center的父容器中再加mx-auto，会冗余甚至冲突 - 如果按钮用了
btn-block（Bootstrap 4）或w-100，它已占满父宽，mx-auto失效——此时应限制宽度，比如加max-width: 200px再配mx-auto
示例：<button class="btn btn-primary d-block mx-auto">提交</button>
按钮组（.btn-group）必须外包一层 d-flex
.btn-group 默认是 display: inline-flex，不是块级容器，所以直接加 justify-content-center 或 mx-auto 都无效。
- 正确做法：外层包一个
<div class="d-flex justify-content-center">，再把.btn-group放进去 - 错误写法：
<div class="btn-group justify-content-center">—— 控制台无报错，但按钮组仍左对齐 - 若按钮组内含下拉菜单（
.dropdown），外层 flex 不影响其position: relative定位，箭头位置依然正常
示例：<div class="d-flex justify-content-center"><div class="btn-group">...</div></div>
多个独立按钮用 d-flex justify-content-center gap-* 更可控
比起用 text-center + 多个 btn，Flex 方案语义清晰、响应式友好，还能统一控制间距。
-
gap-3提供 1rem 按钮间空隙，支持响应式变体如gap-md-4 - 加
flex-wrap可在小屏自动换行；若需强制单行，确保按钮总宽度不超容器，或配合overflow-x-auto - 避免用
text-center包多个按钮：它会让所有行内内容一并居中，一旦按钮文字长度不一或换行，容易视觉错位
示例：<div class="d-flex flex-wrap justify-content-center gap-3"><button class="btn btn-secondary">A</button><button class="btn btn-secondary">B<button></div>
为什么 text-center 有时“看起来有效”，但不可靠
它只作用于行内内容（文字、未设 d-block 的图片），对按钮这种默认 inline-block 元素，仅当父容器是普通块级流（非 flex）时才偶然生效。
- 在
.row或已设d-flex的容器里，text-center被完全忽略 - 响应式断点切换后可能突然失效，比如
text-md-start未重置，大屏下按钮右偏 - 若按钮内嵌图标且用了
float或position: absolute，text-center对其定位无影响
真正需要居中的是按钮本身的位置，而不是它内部的文字——这时候就得用布局类，而不是文本对齐类。
最容易被忽略的一点：居中行为是否随响应式变化而断裂。比如小屏下按钮变多、换行、文字折行，都会让原本靠 text-center 或固定 margin 实现的“居中”变成视觉偏移。Flex 方案虽需多写一层容器，但它的对齐逻辑是基于当前渲染状态实时计算的，更可靠。
