如何正确居中Bootstrap谷歌风格输入框？

我来帮你搞定这个输入框居中的问题！你之前尝试的方法没生效，核心原因是Bootstrap的.form-control默认是width: 100%;——它会占满父容器的全部宽度，这时候margin: 0 auto;自然起不到居中作用。而且用margin-right的hack确实是饮鸩止渴，会在不同屏幕尺寸下破坏响应式布局，完全没必要。

下面给你两种符合Bootstrap设计规范的正确方案：

方案一：用Bootstrap内置网格+工具类（推荐） #

这是最贴合Bootstrap设计理念的方式，利用网格系统控制输入框的宽度，再用内置工具类实现居中，完全不会破坏原有样式：

<!-- 外层用container保证布局规范 -->
<div class="container mt-4">
  <div class="row">
    <!-- 用col类控制不同屏幕下的宽度，mx-auto实现水平居中 -->
    <div class="col-md-7 col-lg-5 mx-auto">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Google">
        <button class="btn btn-outline-secondary" type="button">Search</button>
      </div>
    </div>
  </div>
</div>

• col-md-7 col-lg-5：让输入框在中等屏幕（≥768px）占7列，大屏幕（≥992px）占5列，保证响应式适配；
• mx-auto：Bootstrap内置的水平居中工具类，会自动给容器添加margin-left: auto; margin-right: auto;；
• mt-4：可选，给容器添加上边距，避免输入框紧贴顶部。

方案二：自定义CSS限宽后居中 #

如果你不想用网格系统，也可以给输入框的父容器设置最大宽度，再让父容器居中：

<div id="center">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search Google">
    <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
</div>

#center {
  max-width: 600px; /* 根据你的需求调整最大宽度 */
  margin: 2rem auto 0; /* 上下边距+水平居中 */
}
/* 不需要修改.form-control的宽度，它会自动占满父容器 */

这种方式更简洁，但灵活性不如网格系统，适合固定宽度的场景。

两种方案都能完美实现输入框居中，而且完全遵循Bootstrap的样式规范，不会出现hack带来的兼容性问题。

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