点击提交按钮时如何让Modal中的Captcha居中显示？

你的问题核心是模态框里的验证码区域缺少居中对齐的样式，下面给你两种修复方案：

方案一：用Bootstrap自带类快速搞定 #

直接利用Bootstrap的内置对齐类，不用写额外CSS：

• 给装验证码的.wrapper容器加上mx-auto text-center类，前者负责水平居中，后者让内部元素文本居中：

<div class="wrapper mx-auto text-center">

• 再给.modal-body加上d-flex justify-content-center align-items-center flex-column类，让整个模态框内容垂直+水平都居中：

<div class="modal-body d-flex justify-content-center align-items-center flex-column">

方案二：自定义CSS精细调整 #

如果想要更贴合需求的样式，添加这段CSS代码：

/* 让模态框内容区整体居中 */
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 限制验证码容器宽度并水平居中 */
.wrapper {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

/* 调整验证码区域内部元素对齐 */
.captcha-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 让输入框和按钮横向居中排列 */
.input-area {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
}

额外提醒 #

• 你代码里引入了两个版本的Bootstrap JS（5.0.1和5.1.3），建议只留最新的那个，避免出现冲突；
• 提交按钮需要加触发模态框的JS代码，比如：

document.getElementById('myBtn').addEventListener('click', function() {
  const modal = new bootstrap.Modal(document.getElementById('myModal'));
  modal.show();
});

内容的提问来源于stack exchange，提问作者Alex