不管數量如何，總是保持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; 
}