Psát margin: auto, nebo margin: 0 auto?

Má-li nějaký blokový element nastavenou šířku, jde ho pomocí levého a pravého marginu nastaveného na hodnotu auto vodorovně vycentrovat.

Často je k vidění, že někdo centrování marginem zapisuje předpisem margin: 0 auto. Přitom nula pro horní a spodní odsazení se stejně tak aplikuje při hodnotě auto pro všechny strany. Zápis margin: 0 auto je tedy zbytečně komplikovaný a stačí použít:

.centrovany {
  margin: auto;
}

Výsledek je stejný. Tedy margin-top a margin-bottom budou nulové a element bude umístěn uprostřed.

Nejspíš jediná výjimka, kdy se výsledek margin: auto a margin: 0 auto liší, je centrování absolutním posicováním.

Zachování původního marginu

Pokud je cílem element pouze vycentrovat a zachovat původní hodnoty odsazení, nabízí se dvě možnosti:

1. Přepsat pouze krají hodnoty:

   .centrovany {
     margin-left: auto;
     margin-right: auto;
   }

2. Využít klíčového slova inherit. Funkční od IE 8.

   .centrovany {
     margin: inherit auto;
   }

   Hodnota inherit způsobí, že se hodnota podědí.