如何在Bootstrap 5中居中包含输入框与按钮的两个div

你当前代码里的text-center仅能让容器内的文本内容居中，但row作为Flex容器，默认会让子列（col-md-4、col-auto）左对齐排列。要让这两个列整体在页面水平居中，只需给row添加Bootstrap的justify-content-center类即可——这个类专门用于控制Flex容器内子元素的水平对齐方式。

修改后的完整代码 #

<div class="row g-6 text-center justify-content-center">                        
        <div class="col-md-4">
          <input type="email" style="text-align:left" class="form-control pl-2 shadow-none">
        </div>
        <div class="col-auto">
          <button class="btn btn-block btn-dark" type="submit">INSCREVER-SE!</button>
        </div>    
</div>

补充说明 #

• justify-content-center是Bootstrap Flex布局的核心类，作用就是让Flex容器的子元素在水平方向居中；
• 保留text-center不影响效果，它依然能让按钮内的文字保持居中；
• 输入框的text-align:left可以保留，确保输入内容左对齐，和整体布局居中不冲突。

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