modal底部按钮居中应给.modal-footer加justify-content-center类，因其默认为flex容器，text-center无效；多按钮用gap-2等实现等距；含提示文字时需分离布局，文字用text-center，按钮组用d-flex包裹。
modal底部按钮居中：别用text-center包整个.modal-footer
直接给.modal-footer加text-center看似合理，但容易失效——因为.modal-footer默认是display: flex容器（bootstrap 5.3+），而text-align对flex子项完全无效。按钮仍会左对齐或受justify-content: space-between影响挤到两端。
正确做法是控制.modal-footer自身的flex主轴对齐方式：
- 加
justify-content-center类（推荐）：它直接改写justify-content为center，语义清晰且兼容所有Bootstrap 5.3+版本 - 避免嵌套多余
div：不需要额外包一层div class="d-flex justify-content-center"，徒增DOM节点且可能干扰.modal-footer的默认padding和border - 若项目用了旧版Bootstrap（如5.0–5.2），确认
justify-content-center是否已启用；未启用可手动加CSS：.modal-footer { justify-content: center !important; }，但优先升级或补全工具类
.modal-footer里多个按钮怎么等距+居中？用gap代替mx-*
当底部有2个以上按钮（比如“取消”“保存”“删除”），仅居中不够，还需均匀间距。此时别用mx-2或me-2逐个加外边距——按钮数量一变，样式就得重调，响应式也难维护。
Bootstrap 5.4+原生支持gap，直接生效：
- 给
.modal-footer加gap-2（或gap-3等），按钮间自动产生统一间隙 - 响应式需求？用
gap-md-3 gap-lg-4，小屏紧凑、大屏宽松 - 注意：如果按钮内含图标+文字，且高度不一致，
gap仍能保持垂直对齐，前提是没手动设align-items: flex-start破坏默认行为
为什么加了justify-content-center还是没居中？检查这三个地方
常见失效不是类名写错，而是被其他样式覆盖或布局干扰：
-
.modal-footer被包裹在d-flex容器里：比如有人为了“整体居中”在外层又套了div class="d-flex"，导致.modal-footer变成flex子项，其内部justify-content被父级justify-content压制 - 自定义CSS重置了
display：比如全局写了.modal-footer { display: block !important; }，直接废掉flex布局 - 第三方UI库或框架封装了Modal：Vue/React组件可能隔离了class作用域，或用
style内联覆盖了justify-content，需检查渲染后的实际DOM结构
快速验证：打开浏览器开发者工具，选中.modal-footer，看Computed面板里justify-content是否为center，以及display是否仍是flex。
按钮组本身要居中，但.modal-footer里还有其他内容怎么办？
比如底部既要放按钮组，又要放一行提示文字（如“* 必填字段”），这时不能只靠justify-content-center——文字和按钮组会一起居中，但彼此位置不可控。
更灵活的解法是把按钮组单独抽出来，用d-flex + justify-content-center包裹，文字另起一行并用text-center处理：
<div class="modal-footer">
<small class="text-muted d-block text-center mb-2">* 必填字段</small>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-secondary me-2">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
这种结构明确分离关注点：文字走文本流，按钮走flex布局，互不干扰，也方便后续加loading状态或禁用逻辑。
