使用 Bootstrap 进行垂直和水平居中答案

【问题标题】：Vertical and Horizontal centering using Bootstrap使用 Bootstrap 进行垂直和水平居中
【发布时间】：2016-10-14 13:59:56
【问题描述】：

我有一个使用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

【问题讨论】：

使用 CSS Flexbox 可以轻松解决居中和重叠问题
只需将列宽更改为 3 和 9 而不是 2 和 10。
有什么方法可以维护网格并只操作.infobox 吗？

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：