bootstrap 5 默认模态框会从顶部弹出，需添加 modal-dialog-centered 类才能实现垂直居中；仅靠 d-flex align-items-center 或手动加 mt-* 类无法可靠生效。
在 Bootstrap 5 中，模态框（Modal）默认以“从上往下淡入”的方式显示，其容器 .modal-dialog 的定位依赖于 CSS Transform 和 top: 0，因此仅通过 Flex 布局类（如 d-flex align-items-center）或外边距（如 mt-5）无法真正实现垂直居中——因为 .modal-dialog 在模态层中是绝对定位元素，Flex 属性对其父容器 .modal 不起作用，且 mt-* 在固定定位上下文中也常被忽略。
✅ 正确做法是：直接为 .modal-dialog 添加内置工具类 modal-dialog-centered。该类由 Bootstrap 官方提供，内部使用 transform: translate(-50%, -50%) 配合 top: 50% 和 left: 50%，确保模态框在视口内精准垂直+水平居中。
以下是修复后的标准 HTML 结构（已精简冗余代码，保留语义与可访问性）：
