如何通过Bootstrap实现表单居中？联系页表单居中设置无效求助

• text-center的作用是对齐元素内部的行内内容（文字、按钮、图标），完全无法改变块级元素自身的位置和宽度，把它加在表单div上，只能让表单里的文字居中，没法让整个表单块在页面上居中。
• 你当前的代码用了col-md-12的全宽容器，表单已经撑满了整个父级宽度，自然不存在居中的视觉效果。

方案1：原生栅格调整（零自定义CSS，最贴合现有代码） #

直接修改最外层包裹well的列容器尺寸，利用Bootstrap栅格的偏移属性实现整体居中：

1. 把原本占满宽度的<div class="col-md-12">，修改为col-md-8 col-md-offset-2，让表单容器占8份栅格宽度，左右各空出2份栅格的距离，视觉上自然实现水平居中。
2. 同步调整表单内部每个分组的列偏移，去掉之前硬加的col-md-offset-2，把图标所在的span列宽调整为col-md-2 text-center，输入框所在的div列宽调整为col-md-10，让内部布局和外层宽度匹配，不会出现偏移错乱。

修改后的核心结构示例：

<div class="container">
  <div class="row">
    <!-- 修改外层列配置实现居中 -->
    <div class="col-md-8 col-md-offset-2">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>
            <legend class="text-center header">Contact us</legend>
            <!-- 调整每个表单项的内部列宽匹配外层尺寸 -->
            <div class="form-group">
              <span class="col-md-2 text-center"><i class="fa fa-user bigicon"></i></span>
              <div class="col-md-10">
                <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
              </div>
            </div>
            <!-- 邮箱、消息文本域的表单项按照同样逻辑调整即可 -->
            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

方案2：Flex布局居中（灵活度更高） #

如果不想调整栅格比例，可以利用Flex布局直接实现容器居中，不需要计算栅格偏移：

1. 把原来的全宽列容器加上Flex类：col-md-12 d-flex justify-content-center
2. 给包裹表单的well容器设置固定宽度（比如总宽度的75%），即可实现水平居中：

<div class="col-md-12 d-flex justify-content-center">
  <div class="well well-sm w-75"> <!-- w-75 表示宽度占父容器的75% -->
    <!-- 原有表单内部代码完全不需要修改 -->
  </div>
</div>

如果项目使用的是Bootstrap 3，没有内置的Flex类，可以直接加几行自定义CSS实现：

.center-form-wrapper {
  display: flex;
  justify-content: center;
}
.center-form-wrapper .well {
  width: 75%;
}

内容的提问来源于stack exchange，提问作者Dominik Smolinský