Centrování na webových stránkách

Centrování flexboxem

Nejpoužívanější moderní způsob. Stačí na rodičovský element aplikovat:

.rodic {
  display: flex;
  justify-content: center;  /* horizontálně */
  align-items: center;      /* vertikálně */
}

Pro pouze horizontální centrování stačí justify-content: center. Pro pouze vertikální stačí align-items: center.

Pozor na výkon: Flexbox musí před vykreslením znát všechny své položky. Prohlížeč nemůže renderovat průběžně jako u blokového layoutu — poslední <div> na konci kontejneru může změnit rozložení všech předchozích prvků. U rozsáhlých stránek to může způsobit viditelné „přeskočení” obsahu při načítání.

Centrování více prvků

Flexbox umožňuje snadno centrovat i více prvků s mezerami mezi nimi:

Centrování pomocí CSS Grid

Nejkratší zápis pro vycentrování jediného prvku:

.rodic {
  display: grid;
  place-items: center;
}

Vlastnost place-items je zkratka pro align-items a justify-items najednou.

Centrování v Tailwindu

Používáte-li Tailwind CSS, centrování je ještě jednodušší díky utility třídám:

<!-- Flexbox centrování -->
<div class="flex items-center justify-center">
  Obsah
</div>

<!-- Grid centrování -->
<div class="grid place-items-center">
  Obsah
</div>

<!-- Horizontální centrování bloku -->
<div class="mx-auto w-96">
  Obsah
</div>

Třída mx-auto je ekvivalent margin-left: auto; margin-right: auto.

Horizontální centrování bloků (margin: auto)

Klasický způsob pro horizontální centrování blokového elementu se známou šířkou:

Funguje i s max-width pro responzivní design:

.element {
  margin: 0 auto;
  width: 90%;
  max-width: 800px;
}

Centrování inline obsahu (text-align: center)

Pro centrování textu nebo inline/inline-block elementů:

Poznámka: vlastnost text-align se dědí na potomky.

Vertikální centrování jednoho řádku

Pro jednořádkový text ve fixní výšce lze použít line-height rovný výšce:

Centrování absolutně posicovaného elementu

Pro modální okna, lightboxy a podobné prvky:

Pomocí transform

Funguje i pro elementy s neznámou šířkou/výškou:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Pomocí inset a margin auto

Pro elementy se známou šířkou/výškou:

.element {
  position: absolute;
  inset: 0;  /* = top: 0; right: 0; bottom: 0; left: 0; */
  margin: auto;
  width: 200px;
  height: 100px;
}

Centrování pomocí table-cell

Starší technika, která stále funguje. Hodí se pro vertikální centrování obsahu s neznámou výškou:

.rodic {
  display: table-cell;
  vertical-align: middle;
  text-align: center;  /* pro horizontální centrování */
}

Shrnutí

Situace	Doporučené řešení
Obecné centrování	display: flex + justify-content/align-items: center
Jednořádkové centrování	display: grid; place-items: center
Blok se známou šířkou	margin: 0 auto
Inline obsah, text	text-align: center
Modální okno, lightbox	position: absolute + transform: translate(-50%, -50%)

Historické okénko

Pro zajímavost zde jsou techniky, které se používaly v dobách Internet Exploreru 6, 7 a 8. Dnes už nejsou potřeba, ale lze na ně narazit ve starších projektech.

Problém s inline-block v IE 6/7

Internet Explorer do verse 7 neuměl správně nastavit display: inline-block na blokové elementy (<div>, <p>). Řešilo se to kombinací display: inline a zapnutím hasLayout:

.element {
  display: inline-block;
  *display: inline;  /* hvězdičkový hack pro IE 6/7 */
  *zoom: 1;          /* zapne hasLayout */
}

Centrování s neznámou výškou v IE 7

Pro starší Explorery se používal trik s pomocným absolutně posicovaným obalem:

1. Pomocný obal se posunul do poloviny (top: 50%)
2. Vnitřní obsah se vrátil o polovinu zpět (position: relative; top: -50%)

.obal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}
.obsah {
  position: relative;
  top: -50%;
}

Rovnítkový hack

Pro cílení pouze na IE 7 se používal rovnítkový hack — vlastnosti s = na začátku četl jen IE 7:

.element {
  display: table-cell;
  =display: block;  /* jen IE 7 */
}

Podmíněné komentáře

Speciální CSS pro staré Explorery se načítalo podmíněnými komentáři v HTML:

<!--[if lte IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->

Tyto techniky jsou dnes už jen historickou kuriozitou — Internet Explorer byl oficiálně ukončen v roce 2022.