不管数量如何，总是保持div居中居中水平

Question

我试图定义一个干净的css + html方式来保持div始终居中，无论有多少，有时有一个，但有时候是3或4.所以这就是我得到的：

<div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
     <div class="col-xs-3" style="background-color: blue;"> -2- </div> 
     <div class="col-xs-3" style="background-color: green;"> -3- </div> 
     <div class="col-xs-3" style="background-color: yellow;"> -4- </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
     <div class="col-xs-3" style="background-color: blue;"> -2- </div> 
     <div class="col-xs-3" style="background-color: green;"> -3- </div> 
    </div> 

您可以在这里打球：http://www.bootply.com/iSkvWiFFjR

正如你所看到的div总是向左，是有办法让他们始终居中无论是解决这一问题的数量，也许包装排div？

Answer 1

添加类Row和Col使其居中。正如本网站所述：Center divs with Bootstrap 3

.row-centered { 
    text-align:center; 
} 
.col-centered { 
    display:inline-block; 
    float:none; 
    /* reset the text-align */ 
    text-align:left; 
    /* inline-block space fix */ 
    margin-right:-4px; 
} 

<div class="row row-centered"> 
    <div class="col-xs-3 col-centered" style="background-color: red;"> -1- </div> 
</div> 

Answer 2

您需要使用col-xs-offset-*类来抵消您的列。然而，你不能什么居中跨越3列，它必须是偶数：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: blue;">-2-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: green;">-3-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: yellow;">-4-</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: blue;">-2-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: green;">-3-</div> 
 
</div>

Answer 3

使用flexbox将工作。这里的代码应该做你想做的。

.row { 
    display: flex; 
    justify-content: center; 
    flex-direction: row; 
} 

.col-xs-3 { 
    width: 25%; 
    margin: 0; 
}