如何使用Bootstrap 5实现任意分辨率下页面内容的水平垂直居中

Bootstrap 5 全分辨率水平垂直居中实现方案 #

要实现任意分辨率下页面内容水平垂直居中，直接使用Bootstrap 5内置的flex工具类即可，无需额外编写自定义CSS，你原有代码的问题主要是用到了Bootstrap 5已经弃用的jumbotron、form-group组件，同时布局结构缺少水平居中的相关配置。

修正后的完整代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <!-- 外层容器撑满视口高度，同时设置flex居中 -->
  <div class="container-fluid min-vh-100 d-flex justify-content-center align-items-center">
    <div class="row w-100">
      <!-- 保留你原有的8列宽度配置，内容内部居中 -->
      <div class="col-8 mx-auto p-0 text-center">
        <div class="bg-light p-5 rounded"> <!-- 替代原有的jumbotron效果 -->
          <h1 class="display-4">Welcome Back</h1>
          <p class="lead">Enter your account details below.</p>
          <form class="text-start mt-4"> <!-- 表单内容左对齐，可根据需求调整 -->
            <div class="mb-3"> <!-- 替代原有的form-group -->
              <label for="exampleInputEmail1" class="form-label">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <p class="lead mt-4">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

核心配置说明：

• min-vh-100：让外层容器高度始终等于当前视口高度，适配任意屏幕尺寸
• d-flex justify-content-center align-items-center：三个类组合实现flex容器内的子元素水平+垂直居中
• mx-auto：给内容列设置左右自动外边距，保证列本身在水平方向居中

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