将 Bootstrap 3 div 放在居中的 div 中以居中答案

【问题标题】：Put a Bootstrap 3 div inside a centered div to center将 Bootstrap 3 div 放在居中的 div 中以居中
【发布时间】：2018-01-21 11:14:01
【问题描述】：

我有这样的代码-

html, body, .container-table {
  height: calc(100% - 50px);
}

/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="container container-table">
  <!-- Main div to hold all Data -->

  <!-- Login Form -->
  <div class="row vertical-center-row">

    <h2 class="text-center">Login</h2>
    <form class="form-horizontal" action="login.html">
      <div class="form-group">
        <label for="inputEmail" class="control-label col-md-2">Email</label>
        <div class="col-md-4">
          <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="text-center control-label col-md-2">Password</label>
        <div class="col-md-4">
          <input name="password" type="password" class="form-control" placeholder="Password" required>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-4">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
    </form>
  </div>
</div>

所以，我得到了这样的输出-

但我想要这样-

有人可以帮忙吗？

重新-

这个问题-

Centering Login Form Bootstrap

这不是我的问题的解决方案，因为如果你运行给定的代码并阅读要求，那么你可以很容易地找到这个。

更多- 我的问题不是让 div 居中，我的问题是让 div 在已经水平和垂直居中的 div 中居中。

【问题讨论】：

它的显示与您的预期相同。 jsfiddle.net/bta88dcL
可能另一个 CSS 样式表正在修改容器的位置、边距、填充或浮动。如果您不想更改正在这样做的样式表，您可以使用!important。是的，我知道这是不好的做法，我并不总是推荐它，但有时你只需要得到 "hackey" |)
@freedomn-m 已经有引导 css。再次检查小提琴。
Centering Login Form Bootstrap的可能重复

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

试试

.container-table
{
    display: table;
    margin: 0 auto; 
}

【讨论】：

【解决方案2】：

将col-md-offset-3 添加到表单中一行的第一个元素

所有引导表都有 12 列 -> 表单的宽度是 6 个单元格 -> 所以你还有 6 个单元格 -> 将表单推入 3 个单元格，每边都有 3 个单元格

html,
body,
.container-table {
  height: calc(100% - 50px);
}
/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>




<div class="container container-table">
  <!-- Main div to hold all Data -->

  <!-- Login Form -->
  <div class="row vertical-center-row">

    <h2 class="text-center">Login</h2>
    <form class="form-horizontal" action="login.html">
      <div class="form-group">
        <label for="inputEmail" class="control-label col-md-2 col-md-offset-3">Email</label>
        <div class="col-md-4">
          <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="text-center control-label col-md-2 col-md-offset-3">Password</label>
        <div class="col-md-4">
          <input name="password" type="password" class="form-control" placeholder="Password" required>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-5 col-md-4">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
    </form>
  </div>
</div>

【讨论】：

它不工作，如果我运行你的代码 sn-p，我得到这个-joxi.ru/Vrw8EngfK3G4Nm。 NP，我有我的答案，感谢您尝试帮助我

【解决方案3】：

您为什么不简单地使用引导列？这样，登录 div 中的文本和按钮的对齐方式不会受到影响，并且您不需要任何额外的 CSS：

<div class="container row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
       Your login form HTML here ...
    </div>
    <div class="col-md-4"></div>
</div>

【讨论】：

【解决方案4】：

请试试这个：

将你的按钮放在一个 div 中，例如：

<div class="row">
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</div>

并将 text-align:center 分配给该 div。

【讨论】：

Satya 你不小心把 div.row 打开了：D

【解决方案5】：

html,
body,
.container-table {
  height: calc(100% - 50px);
}
body{top:50%;}

/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
  <!-- Main div to hold all Data -->

  <!-- Login Form -->
  <div class="row vertical-center-row">

    <div class="col-md-10 col-md-offset-1">
    <h2 class="text-center">Login</h2>
    </div>
    <div class="col-md-10 col-md-offset-1">
      <form action="login.html" class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-md-2" for="inputEmail">Email</label>
        <div class="col-md-8">
          <input type="email" required="" placeholder="Email" class="form-control" name="email">
        </div>
      </div>
      <div class="form-group">
        <label class="text-center control-label col-md-2" for="inputPassword">Password</label>
        <div class="col-md-8">
          <input type="password" required="" placeholder="Password" class="form-control" name="password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-8">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <div>
      <div class="col-md-10 col-md-offset-1">
        <button class="center-block btn btn-primary" type="submit" name="remember_me">Sign in</button>
    </div>
      
      </div>
    </form>
    </div>
  </div>
</div>

【讨论】：