如何使用Bootstrap 4实现登录界面的X轴与Y轴居中？

嘿，我来帮你快速搞定这个登录界面的居中设置！你的代码已经有了正确的方向，但有几个小细节需要调整，我一步步给你说明：

现有代码的问题点 #

• CSS里的h100是拼写错误，Bootstrap 4的100%高度类是h-100
• HTML里的col-d-4是笔误，应该是col-md-4（你可以根据需要换成col-sm-4/col-lg-4等断点类）
• body.login-body的padding-top:20px会干扰垂直居中效果，建议移除或者换成给登录框加间距类

修正后的完整代码 #

CSS部分

html {
  height: 100%;
  background-color: #fff;
  font-size: 12px;
}
body.login-body {
  height: 100%;
  background-color: #fff;
  /* 移除padding-top，避免影响垂直居中 */
}

HTML部分

<body class="login-body">
  <!-- 给container加上h-100，让它占满父级高度 -->
  <div class="container h-100">
    <!-- row加上align-items-center实现垂直居中，h-100让行占满容器高度 -->
    <div class="row align-items-center h-100">
      <!-- col-md-4控制宽度，mx-auto实现水平居中 -->
      <div class="col-md-4 mx-auto">
        <div class="text-center">
          <img src="/img/perma-xsm.png" alt="Logo">
        </div>
        <div class="login-box mt-4"> <!-- 用mt-4给登录框加顶部间距，替代body的padding-top -->
          <!-- 这里放你的登录表单内容 -->
          <form>
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" id="username" placeholder="输入用户名">
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" id="password" placeholder="输入密码">
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

关键原理说明 #

1. 垂直居中：通过html→body→container→row层层设置height:100%（用Bootstrap的h-100类），再给row加上align-items-center，就能让行内的列在垂直方向上居中。
2. 水平居中：给列加上mx-auto类，Bootstrap会自动给它设置左右margin:auto，实现水平居中。
3. 间距控制：如果需要登录框和顶部logo之间有间距，用Bootstrap的间距类（比如mt-4）代替body的padding，这样不会破坏整体的居中布局。

这样调整后，你的登录界面就能在视口的X轴和Y轴方向完美居中啦！

内容的提问来源于stack exchange，提问作者Yvan Dupré