技术求助：无法将表单设置为居中对齐

我看到你用了Bootstrap框架，要让表单居中其实很简单，下面给你几个实用的方案：

方案一：用Bootstrap内置工具类快速实现 #

Bootstrap自带了现成的布局类，不用写太多自定义CSS就能搞定：

1. 先把表单放在一个容器里（比如container），给父容器加上flex相关的类，让它能水平+垂直居中内容；再给表单加mx-auto类让它水平居中，同时设置一个最大宽度避免表单太宽。

修改后的HTML结构参考：

<section id="cover">
  <div id="cover-caption" class="container d-flex align-items-center justify-content-center min-vh-100">
    <!-- 你的表单 -->
    <form class="mx-auto" style="max-width: 500px;">
      <div class="mb-3">
        <label for="email" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="email">
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
</section>

简单解释下这些类的作用：

• d-flex align-items-center justify-content-center：让父容器变成flex布局，同时实现内容的垂直+水平居中
• min-vh-100：让父容器占满整个视口高度（如果不需要垂直居中可以去掉这个）
• mx-auto：让表单这个块级元素自动左右margin居中
• max-width: 500px：限制表单的最大宽度，避免拉伸太宽影响美观

方案二：自定义CSS实现 #

如果你更习惯写自定义样式，也可以在stylesheet.css里加这段代码：

#cover {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 可选，需要垂直居中就保留 */
}

#cover-caption form {
  max-width: 500px;
  width: 100%;
}

这样#cover作为flex容器，会自动把里面的表单居中，同时限制表单宽度，效果和方案一一致。

小提醒 #

• 要确保你的Bootstrap CSS文件已经正确引入，不然内置工具类不会生效哦
• 如果只需要水平居中不需要垂直居中，去掉align-items-center和min-vh-100相关的类/样式就行，只保留mx-auto或者justify-content-center

你可以根据自己的需求选其中一种方案，一般推荐方案一，用框架自带的工具类更简洁也更符合Bootstrap的使用习惯~

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