Bootstrap5如何实现表单输入框及内容水平居中布局

问题背景 #

前端初学者在学习前端开发过程中尝试制作居中布局的卡号校验表单，初始编写代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <style>
    .container {
      height: 100%;
      width: 50%
    }
    
    .center-block {
      margin: auto;
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center fst-italic mt-5">CARD NUMBER CHECKER</h1>
    <br>
    <br>
    <div class="inpCont ">
      <div class="row g-3 align-items-center">
        <div class="col-auto">
          <label class="col-form-label text-center">Input Number</label>
        </div>
        <div class="col-auto">
          <input type="text" class="form-control text-center">
        </div>
      </div>
    </div>
    <br>
    <div class="d-grid gap-2 col-3 mx-auto">
      <button class="btn btn-warning" type="button">Submit</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

初始运行效果 #

预期实现效果 #

修复步骤 #

核心问题有两个：一是自定义的.container类和Bootstrap内置类重名，覆盖了框架默认的布局逻辑；二是包裹输入项的.row作为flex容器，没有设置主轴居中，子元素默认靠左排列。
按以下修改即可实现输入框居中效果：

• 删除自定义样式中重名的.container样式，避免干扰Bootstrap默认布局，无用的.center-block样式也可以一并删除。
• 给包裹输入标签和输入框的.row元素添加Bootstrap内置的justify-content-center类，实现flex子项水平居中。
• 按需给输入框设置固定宽度，匹配预期设计的尺寸。

修改后的输入区域代码如下：

<div class="inpCont">
  <!-- 新增justify-content-center类实现行内元素居中 -->
  <div class="row g-3 align-items-center justify-content-center">
    <div class="col-auto">
      <label class="col-form-label">Input Number</label>
    </div>
    <div class="col-auto">
      <!-- 给输入框设置合适宽度 -->
      <input type="text" class="form-control" style="width: 320px;">
    </div>
  </div>
</div>

如果需要实现整个表单在视口内垂直+水平双居中，可以给外层容器追加min-vh-100 d-flex flex-column justify-content-center类，不需要额外写自定义CSS。

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