3 snadné způsoby, jak vycentrovat prvek pomocí CSS

Table of Contents

Klíčové věci

Centrování prvků ve webových rozvrženích bylo vždy výzvou, ale moderní CSS nyní podporuje snadné centrální umístění.
Flexbox je nejrozšířenější metoda pro centrování prvků a poskytuje flexibilní model rozvržení, který umožňuje snadné zarovnání.
CSS Grid a CSS positioning jsou také efektivní metody pro centrování prvků na webové stránce, které nabízejí přesnou kontrolu nad rozložením a zarovnáním.

Vycentrování prvku v rozvržení webu je výzva, která designéry vždy frustrovala. Nebylo to vždy snadné, ale mnoho návrhů vyžaduje centrální umístění. Naštěstí moderní CSS má nyní dobrou podporu pro centrování.

Naučte se, jak vycentrovat prvek div vodorovně a svisle pomocí Flexboxu, mřížky CSS a umístění CSS.

Jednoduchý soubor HTML k procvičení centrování

Všechny následující příklady používají minimální dokument HTML k ukázce centrování pomocí CSS. Použijte toto označení a měňte CSS podle jednotlivých sekcí, abyste viděli, jak se tyto vlastnosti chovají.

 <!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh - 16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Použití Flexboxu k vystředění prvku Div

Než použijete Flexbox k vystředění prvku div, musíte porozumět jeho základům. Naštěstí se Flexbox řídí jednoduchým přístupem, a proto je nejpoužívanější. Poskytuje flexibilní model rozvržení, který usnadňuje zarovnání a rozdělení prostoru mezi položky v kontejneru, takže je ideální pro centrování prvků.

Opravte chybu, která se vyskytla při načítání kvalitnější verze tohoto videa na iPhone

K vystředění pomocí Flexbox použijte následující CSS.

Zabalte prvek div do kontejneru. Chcete-li aktivovat rozložení Flexbox, použijte na kontejner vlastnost display: flex. V jednoduchém testovacím případě může tělo sloužit jako kontejner:

 body {
  display: flex;
}

Použijte vlastnosti justify-content a align-items k zarovnání položek podél hlavní osy (horizontální) a příčné osy (vertikální). Chcete-li vycentrovat obě osy, nastavte tyto vlastnosti na střed. Pro jednoduchou ukázku byste měli také nastavit výšku těla na 100vh, abyste viděli efekt vertikálního zarovnání.

 body {
  justify-content: center;
  align-items: center;
}

Dejte divu barvu pozadí, aby bylo možné vizualizovat jeho umístění na poslední stránce:

 div { background-color: red; }

Zobrazením výsledku v nástrojích DevTools Google Chrome můžete vidět, jak tyto dvě vlastnosti řídí zarovnání podél každé osy:

Co je analýza souborů protokolu a proč je důležitá pro SEO?

Použití mřížky CSS k vystředění prvku Div

Použití mřížky CSS k vystředění prvku je další efektivní metoda, která nabízí přesnou kontrolu nad rozložením a zarovnáním.

Definujte kontejner pro své rozvržení a aplikujte styl mřížky display: pro aktivaci mřížky CSS. V tomto případě tělo slouží jako nádoba.

 body {
  display: grid;
}

Pomocí vlastností grid-template-columns a grid-template-rows definujte strukturu vaší mřížky. Pro centrování bude stačit jeden sloupec a řádek, proto použijte 1fr pro oba.

 body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

Pomocí vlastnosti place-items vycentrujte obsah mřížky vodorovně i svisle.

 body {
  place-items: center;
}

Upravte styl pozadí prvku div tak, aby se zobrazil ve středu kontejneru mřížky.

 div {
  background-color: blue;
}

V tomto případě jediná vlastnost řídí centrální umístění prvku div na vaší stránce:

Použití CSS Positioning k vystředění prvku Div

Chcete-li použít vlastnost CSS position k vystředění prvku div, musíte také pochopit, jak fungují transformace CSS s přechody. Zde je návod krok za krokem s příkladem.

Špičkový robotický vysavač základní úrovně

Chcete-li umístit prvek div, ujistěte se, že jeho kontejner má relativní polohu. Tím se vytvoří kontext relativního umístění, takže prvek div můžete umístit do středu jeho kontejneru.

 body {
  position: relative;
}

Aplikujte absolutní umístění na prvek div a poté pomocí vlastností top a left umístěte levý horní roh prvku div přesně do středu jeho kontejneru.

 div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 background-color: green;
}

Transformace translate(-50%, -50%) posune div doleva a nahoru o polovinu jeho šířky a polovinu jeho výšky.

Tato metoda funguje tak, že nejprve vycentrujete horní roh prvku a poté jej relativně posunete o polovinu jeho šířky a polovinu jeho výšky.

Flexbox, CSS Grid a CSS positioning jsou výkonné nástroje, které můžete použít k vystředění prvků na webové stránce. S Flexboxem můžete pomocí několika řádků kódu vycentrovat horizontálně i vertikálně. Mřížka CSS poskytuje výkonné zarovnání ve dvou rozměrech a pomocí umístění CSS můžete prvek vycentrovat vzhledem k jeho nadřazenému kontejneru.

Pomocí těchto technik můžete zajistit, aby vaše webové stránky vypadaly čistě a profesionálně.