在引导网格中居中嵌套 div答案

【问题标题】：Center nested divs in bootstrap grid在引导网格中居中嵌套 div
【发布时间】：2018-01-10 19:42:16
【问题描述】：

我想创建一个布局。我正在使用引导网格。这是示例

如何将白色 div 和 div1 和 div2 分别居中在白色 div 中。

     <div class="row">



    <div class="col-xs-12 col-sm-10 col-md-10" style="background-color:#F1F3F7; min-height:650px;border: 2px solid black ">

    <div class="  col-xs-12 col-sm-8 col-md-8" style="background-color:#ffffff;  min-height:500px;border: 2px solid black ">
Need to be centered
        <div class="row">
         <div class="col-xs-12 col-sm-8 col-md-10" style="background-color:#F1F3F7; margin: 10px; min-height:500px;border: 2px solid black ">

div1

        </div></div>
        <div class="row">
<div class="col-xs-12 col-sm-8 col-md-10" style="background-color:#F1F3F7; margin: 10px; min-height:500px;border: 2px solid black ">
div2</div></div>
</div>
</div>





  </div>

【问题讨论】：

最外面的区域是<body>还是另一个<div>？
如果您使用引导网格，例如col-md, col-lg 等这些类默认具有 css 属性float: left;。您将 div 居中对齐，您必须将其更改为 float:left; 并将边距设置为 margin: 0 auto;。或者检查引导程序中提供的偏移类，例如col-md-offset-

标签： css twitter-bootstrap grid

【解决方案1】：

您可以使用引导程序offset：

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
</div>

相应地更改值。或者，您可以使用margin: 0 auto;

.div-centered{
    float: none;
    margin: 0 auto;
}

Bootstrap 3 有一个名为 center-block 的内置类，您可以使用它。我很确定你必须错过row 课程并使用container，我可能错了。试试看。

【讨论】：

【解决方案2】：

您可以使用col-*-offset-* 将元素推到右侧。

确保col-*-*、offset 和剩余空间的值仍应等于12 列，以便您可以将元素居中

.outermost {
  border: 1px solid red;
  height: 100%;
}

.div1 {
  height: 100px;
  width: 100px;
  border: 1px solid pink;
}
.div2 {
  height: 50px;
  width: 50px;
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="outermost container-fluid">
  <div class="row">
    <div class="div1 col-xs-4 col-xs-offset-4">
      <div class="div2 col-xs-4 col-xs-offset-4"></div>
    </div>
  </div>
</div>

【讨论】：