使用Bootstrap/Flexbox无法垂直居中表单，代码是否存在问题？

问题描述 #

我正在开发一个带登录/注册表单的MVC网站，想用Bootstrap格式化表单，希望表单在屏幕上水平垂直居中，但目前只能实现水平居中。只有justify-content-center类能改变布局，试了align-items-center、align-self-center、align-content-center这些类，页面布局完全没变化。

用户原代码：

<div class="d-flex justify-content-center">
  <div class="login-card">
      <h2 class="page-title">Signup</h2>
      <form class="form signup-form">
        <div class="form-group">
          <label for="username-signup">Username:</label>
          <input class="form-input" type="text" id="username-signup" />
        </div>
        <div class="form-group">
          <label for="email-signup">Email:</label>
          <input class="form-input" type="text" id="email-signup" />
        </div>
        <div class="form-group">
          <label for="password-signup">Password:</label>
          <input class="form-input" type="password" id="password-signup" />
        </div>
        <div class="form-group">
          <button class="btn btn-primary" type="submit">signup</button>
        </div>
      </form>
    </div>
  </div>
</div>

解决方案 #

要实现垂直居中，核心是让外层flex容器占据足够高度，修改后的代码如下：

<div class="d-flex justify-content-center align-items-center min-vh-100 py-3">
  <div class="login-card">
      <h2 class="page-title">Signup</h2>
      <form class="form signup-form">
        <div class="form-group">
          <label for="username-signup">Username:</label>
          <input class="form-input" type="text" id="username-signup" />
        </div>
        <div class="form-group">
          <label for="email-signup">Email:</label>
          <input class="form-input" type="text" id="email-signup" />
        </div>
        <div class="form-group">
          <label for="password-signup">Password:</label>
          <input class="form-input" type="password" id="password-signup" />
        </div>
        <div class="form-group">
          <button class="btn btn-primary" type="submit">signup</button>
        </div>
      </form>
    </div>
</div>

关键说明 #

• min-vh-100：设置容器最小高度为视口高度的100%，确保容器覆盖整个屏幕高度，这是垂直居中生效的前提；
• align-items-center：在flex容器中，让子元素在垂直方向（交叉轴）上居中；
• py-3：给容器上下添加内边距，避免表单边缘紧贴屏幕，提升视觉体验。

如果页面存在其他外层容器（如body或父级div），需确保这些容器未设置overflow:hidden或高度限制，否则会影响垂直居中效果。

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