logo

Rychlý tip:Nejjednodušší způsob, jak vycentrovat prvky svisle a vodorovně

Flexbox je relativně nový přírůstek do světa CSS a stále pro něj nacházíme stále více vynikajících aplikací. Pomocí CSS můžeme dokonce vyřešit letitý problém s vycentrováním prvku jak svisle, tak vodorovně. Je snazší, než si dokážete představit – obsahuje pouze tři řádky kódu, nevyžaduje zadání velikosti centrovaného prvku a je citlivý!

Tato technika funguje ve všech moderních prohlížečích – IE10+, Chrome, Firefox a Safari (s -webkit- předpona). Úplnou tabulku kompatibility naleznete zde.

<div class="container">
    <!--// Any content in here will be centered.-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus, eros et aliquam volutpat, ante tellus bibendum justo, et mollis orci velit ut odio. Maecenas sagittis mi velit, sit amet varius lorem ornare in. Sed dapibus turpis vel nunc finibus cursus. Nunc erat purus, sodales sit amet neque et, aliquam pretium felis. Mauris eros est, elementum eu eros ut, feugiat fermentum metus. In hac habitasse platea dictumst. Integer tristique semper semper. Etiam quis ligula sit amet ipsum condimentum euismod. Praesent iaculis ante et magna suscipit vulputate. Curabitur vitae porttitor erat. Vivamus vel blandit tellus, ut sollicitudin metus.</p>
</div>
*{
    margin: 0;
    padding: 0;
}

body, html{
    height: 100%;
}

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

    height: 100%;
}

.container p{
    max-width: 50%;
    padding: 15px;
    background-color: #f1f1f1;
}

HTML

Myšlenka se samozřejmě točí kolem flexboxu. Nejprve vytvoříme kontejner, ve kterém chceme, aby bylo vše vystředěno:

<div class="container">
    <!--// Any content in here will be centered.-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

Tento kontejnerový div můžete umístit kamkoli chcete. Ve výše uvedeném živém příkladu jsme zabírali celou šířku a výšku stránky.

CSS

Jak jsme řekli dříve, budeme používat pouze tři řádky kódu. Tady jsou:

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

Každý flex kontejner má dvě osy pro polohovací prvky. Hlavní osa je deklarována pomocí flex-direction vlastnost (může být row nebo column , viz dokumenty). Vynecháním tohoto pravidla jsme ponechali směr ohybu na výchozí row hodnotu.

Nyní vše, co musíme udělat, je vycentrovat obě osy. Jednodušší už to být nemůže:

  1. Nastavte typ zobrazení flex , takže aktivujeme režim flexbox.
  2. justify-content definuje, kde se budou flexibilní položky zarovnávat podle hlavní osy (v našem případě horizontálně).
  3. align-items totéž udělá s osou kolmou k hlavní (v našem případě svisle).

Nyní, když jsme nastavili pravidla pro vertikální a horizontální zarovnání na střed , jakýkoli prvek, který přidáme do kontejneru, bude umístěn perfektně uprostřed. Nepotřebujeme znát jeho rozměry předem, veškerou těžkou práci udělá prohlížeč!

Závěr

Existuje mnoho dalších technik pro centrování obsahu pomocí CSS, ale flexbox to dělá mnohem jednodušším a elegantnějším. Pokud se o tom chcete dozvědět více, podívejte se na tyto zdroje:

  • Kompletní průvodce flexboxem – zde.
  • MDN:Používání flexibilních polí CSS (dlouhé čtení) – zde.
  • Flexbox za 5 minut – zde.