Отзывчивый div с плавающей и центрированной

Question

Теперь я положил float: оставил на моих зеленых divs, но это заставляет их придерживаться влево (имеет смысл). Теперь, как я могу держать свои divs в центре, пока я изменяю размер синего контейнера?

Как и в этом изображении:

Синий: Родитель контейнер Зеленый: Divs

Answer 1

Вы можете использовать display: inline-block на своих дочерних элементов и text-align: center на родительский элемент

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

.container { 
    background-color: blue; 
    width:500px; 
    text-align: center; 
} 

.item { 
    display: inline-block; 
    background-color: green; 
    width: 100px; 
    height: 100px; 
} 

https://jsfiddle.net/g3vp2fyf/

Answer 2

Использование

display: inline-block; 
text-align: center; 

вместо

float: left;