Как расположить 3 div по центру родительского div, да еще и сохранить адаптивность?

Question

[K G]

Здравствуйте,
Имеется div родитель width:100%, в нем лежат 3 div'a. Их нужно расположить в ряд по центру родительского(как по горизонтали, так и по вертикали) так, чтобы при варьировании окна браузера они постоянно оставались по центру, ну а меньше определенной ширины сползали друг под друга.
Был вариант с display:inline-block, но там сразу сбивается ширина между блоками и все такое, вариант с float:left не катит, когда у родителя width:100%.
Помогите решить проблему.

Answer 1

[Андрей]

Решение с флексбокс (везде кроме ИЕ 9 и ниже)

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

jsfiddle.net/u9hpeemz/2

Answer 2

[littleguga]

Может быть поможет.

Answer 3

[IceJOKER]

display: inline;
display: table-cell;
table

выбирайте и дерзайте

Answer 4

[simtim]

используй сетку bootstrap

Answer 5

[Grey_S]

Ещё можно без задавания ширины блока, выровнять (текст остается по левому краю) вот так

<div class="main">
<div class="block">текст</div>
<div class="block">текст</div>
<div class="block">текст</div>
</div>

.main {
width:100%;
display:flex;
}
.block {
-webkit-flex: 1;
flex: 1;
}

в этом варианте ширина блоков будет вычисляться автоматом в зависимости от ширины main. Сползать друг под друга не будут, эту задачу без (media) никак не решить.