Держите div всегда в центре по горизонтали независимо от количества

Question

Im пытается определить чистый css + html способ держать divs всегда централизованным независимо от того, сколько, иногда есть одно, но иногда 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?

Answer 1

Добавить классы в ряд и седловину, чтобы сделать его по центру. Как упоминалось на этом сайте: 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; 
}