Zarovnání textu na střed není (doufám) problém; stačí použít:

.center { text-align: center; }

Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru. S tím nám pomůže automatický margin:

.parent {
    display: block;
    width: 300px;
}
.child {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Nastavením marginu na auto říkáme prohlížeči, že chceme, aby obě protilehlá odsazení měla stejnou velikost. Tím logicky vznikne efekt zarovnání na střed.

Automatický margin platí pouze na element typu block; naopak zarovnání textu platí na inline elementy.

Vertikální zarovnání

Horizontální (zleva doprava) je jednoduché, ale se zarovnáním zhora dolu se trochu zapotíte – tedy pokud vám nestačí podpora jen v novějších prohlížečích (IE11+, Firefox 28+, Chrome 21+, Safari 9+):

.parent { 
    display: flex;
    flex-flow: column;
    align-content: center;
    width: 300px; 
} 
.child { 
    display: block; 
    width: 200px; 
    flex: 0 0 200px;
} 

Flexbox je nový nástroj na vytváření layoutu a jednou z jeho vlastností je to, že dokáže zarovnávat prvky uvnitř kontejneru.

Pokud chcete flexbox využít i v IE10, musíte použít speciální zápis (tzv. Tweener):

.parent { 
    display: -ms-flexbox;
    -ms-flex-flow: column;
    -ms-flex-align: center;
    width: 300px; 
} 

Ještě existuje jedna stará verze flexboxu pro Safari 3.1+ a Firefox 4+:

 
.parent { 
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-align: center;
    -moz-box-align: center;
    width: 300px; 
} 

Zarovnání více prvků

Výše uvedené kódy ale platí jen v případě, že uvnitř kontejneru je jen jeden prvek. Pokud jich máte více a chcete je vedle sebe zarovnané na střed (nebo nahoru či dolu), můžete flexbox použít jen v novějších prohlížečích:

.parent { 
    display: flex;
    flex-flow: row;
    align-content: center;
    justify-content: center;
    width: 300px; 
} 
.child1, .child2 { 
    display: block; 
    width: 100px; 
    flex: 0 0 100px;
} 

Pomocí align-content a justify-content pak můžete řídit, kam se prvky zarovnají. Více viz popis Flexboxu.

Zarovnání jako text

Pro starší prohlížeče můžete zarovnat pouze text pomocí vlastnosti vertical-align. Aby tato vlastnosti fungovala i na blokové prvky, musíte na prvky použít display: inline-block:

 
.parent { 
    display: block;
    width: 300px; 
} 
.child1, .child2 {
    display: inline-block;
    text-align: center;
    vertical-align: center;
    width: 100px;

Hodnota inline-block je podporována od IE8 a Firefox 3, což by dnes už neměl být problém. Firefox 2 podporuje -moz-inline-block.

Pokud byste potřebovali podporu i ve starších prohlížečích (IE7) nebo vertikální zarovnání z nějakého důvodu nefungovalo, budete muset použít tabulkový layout:

 
.parent { 
    display: table;
    width: 300px; 
} 
.child1, .child2 {
    display: table-cell;
    text-align: center;
    vertical-align: center;
    width: 100px; /* bude mít 150px!!! */

Pozor ale na to, že zatímco u flexbox a inline-block je možné zarovnat prvky na střed při zachování dané velikosti, tak u tabulky musí sloupce vyplnit celý prostor. Výše uvedená tabulka tedy bude mít sloupce 150px široké. Pokud byste chtěli zachovat sloupce 100px široké, museli byste šířku tabulky snížit na 200px a přidat jí margin: 0 auto. V tabulce se též prvky nemohou automaticky zalomit na další řádek.

Absolutní zarovnání

Pokud máte kontejner s pevnou velikostí a v něm jen jeden prvek, můžete ho zarovnat pomocí absolutního pozicování:

 
.parent() {
    position: relative;
    width: 300px;
    height: 200px;
}
.child {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Pozici nahoře nebo vlevo nastavíte tím, že top nebo left nastavíte na nulu a dáte nulovou odpovídající hodnotu translate. Pozici dole nebo vpravo pak nastavíte tak, že top nebo left nastavíte na auto a přidáte bottom: 0 nebo right: 0.