Najlepší spôsob vertikálneho stredu horizontálne zameraného radu divov [duplicitné] - javascript, html, css, layout

Aký je najlepší spôsob, ako centrovat niekoľko divov?

Môžem si predstaviť niekoľko spôsobov, ale ja hľadám najjednoduchšie, najviac elegantné.

Tu je odkaz na stránku, ktorá to robí:

http://soulmastery.com/#/News

Hľadám niečo, čo je IE9 + bezpečné.

---

Aktualizácia 1

Len aby som objasnil, musím vertikálne rozmiestniť aj rad divov.

Nie je to duplikát, referenčné otázky sú centrály iba horizontálne.

---

Aktualizácia 2

Táto husle (http://jsfiddle.net/k6ShD/4/) takmer to robí, s minimálnym CSS, ale potrebujem, aby boli tieto polia umiestnené vodorovne.

align-items: center;

---

Aktualizácia 3

Keďže otázka bola ukončená, položím tu odpoveď.

ja vedel musel to byť dobrý spôsob, ako to urobiť s CSS3:

http://jsfiddle.net/k6ShD/6/

V podstate,

display:flex;
align-items: center;
justify-content: center;

Sú to kľúče, ako to robiť s modelom flex boxu.

odpovede:

1 pre odpoveď č. 1

Najlepší spôsob, ako centrovanie ľubovoľnej množiny divov, ako je to, je nastaviť ich zobrazovací režim na inline-block a nastaviť ich rodič na stred textu:

<div class="wrapper">
<div id="box-1" class="center-me">...</div>
<div id="box-2" class="center-me">...</div>
<div id="box-3" class="center-me">...</div>
</div>

.wrapper {
text-align: center;
}
.center-me {
display: inline-block;
}

---

1 pre odpoveď č. 2

Nie je tam žiadna najlepšia cesta, ale veľa spôsobov, ako to urobiť ... Tým sa vynuluje okraj prvého stĺpca.

    <section id="soul-masters" class="row">
<div class="col">[col1]</div>
<div class="col">[col2]</div>
<div class="col">[col3]</div>
</section>

*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#soul-masters {
margin: 0 auto;
max-width: 990px;
}
.row:before, .row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col {
float: left;
width: 31.3333%;
background: gray;
margin-left: 2%;
}
.col:first-child {
margin-left: 0;
}

http://fiddle.jshell.net/3eNds/20/ (pridaná normalizácia.css na nastavenie niektorých predvolených nastavení, odstránenie nepotrebného vynulovania okraja na kontajneri riadkov)

http://fiddle.jshell.net/3eNds/20/show/

---