在引导网格中居中嵌套div

Question

我想创建一个布局。我正在使用bootstrap网格。这是一个例子

我如何将白色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>

Answer 1

您可以使用bootstraps 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，我可能错了。试试吧。

Answer 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>