使用Bootstrap进行垂直和水平对中

Question

我有一个简单的登录表单，使用Bootstrap 3.3.7和一个包装类div进行样式设置。表单看起来像是垂直和水平居中，但在完整浏览器屏幕中查看时，文本框会重叠标签。

如何使表单元素应用默认引导行为？

HTML

<div class="container body-content">
<div class="infobox">
<div class="row">
  <section id="loginForm">
    <form action="" class="form-horizontal" method="post" role="form">
      <div class="form-group">
        <label class="col-md-2 control-label" for="Email">Email</label>
        <div class="col-md-10">
          <input class="form-control" id="Email" name="Email" type="text" value="" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label" for="Password">Password</label>
        <div class="col-md-10">
          <input class="form-control" name="Password" type="password" />
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <div class="checkbox">
          </div>
        </div>
      </div>
    </form>
  </section>
</div>

CSS（.infobox）

.infobox {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

jsfiddle

Answer 1

检查this更新的小提琴。不要将标签保留为引导列。

    <div class="col-md-10">
                <label for="Email">Email</label>
                  <input class="form-control" id="Email" name="Email" type="text" value="" />
</div>