bootstrap模态框按钮居中需清除.modal-footer默认justify-content: flex-end，改用d-flex justify-content-center并确保按钮为直接子元素；text-align: center在flex容器中无效，多按钮时居中仅适用于两个语义并列按钮。
按钮居中排列的 CSS 陷阱
直接给 .modal-footer 加 text-align: center 或 justify-content: center 往往失效——因为 Bootstrap 5.3+ 默认把 .modal-footer 设为 display: flex 且 justify-content: flex-end，会覆盖你的居中声明。更麻烦的是，某些版本还加了 margin-left: auto 到按钮上，导致“取消”被挤到最右，“确认”反而卡在中间。
用 d-flex justify-content-center 的前提条件
必须显式清除默认右对齐逻辑，否则居中不生效：
- 移除或覆盖
.modal-footer的justify-content: flex-end（Bootstrap 默认） - 确保按钮是
.modal-footer的直接子元素，不要嵌套额外<div> <li>避免给按钮加 <code>ms-auto或me-auto—— 它们会干扰 flex 主轴布局
正确写法示例：
<div class="modal-footer d-flex justify-content-center"> <button type="button" class="btn btn-secondary">取消</button> <button type="button" class="btn btn-primary">确认</button> </div>
为什么不能只靠 text-center
text-center 只对 inline 元素或文本有效；而 Bootstrap 按钮默认是 display: inline-block，但在 flex 容器里会被强制按 flex 项处理，text-center 失效。如果你看到按钮没居中，大概率是容器仍处于 flex 状态但没重置主轴对齐方式。
多按钮时的意外偏移
加第三个按钮（如“删除”）后，justify-content-center 会让三者整体居中，但用户常希望“确认”固定右对齐、“取消”左对齐、“删除”靠右——这时不能再用居中，得切回 justify-content-between 或手动用 ms-auto 推单个按钮。居中只适合严格两个按钮且语义并列的场景。
真正容易被忽略的是：按钮顺序和 DOM 位置直接影响视觉与可访问性。哪怕样式生效了，如果 HTML 里“确认”写在前面，屏幕阅读器还是会先读它，违背操作预期。居中不是纯视觉问题，而是语义、焦点流、键盘导航的综合结果。
