Základní principy
- Umisťování prvků do středu webového rozvržení bylo historicky obtížné, ale moderní CSS nabízí snadné a efektivní řešení.
- Flexbox představuje široce používanou metodu pro centrování, poskytující flexibilní model rozvržení pro jednoduché zarovnávání.
- CSS Grid a CSS positioning jsou další účinné techniky pro umisťování prvků do středu webové stránky, umožňující precizní kontrolu nad rozvržením a zarovnáním.
Vycentrování prvku v rozvržení webu bylo vždy výzvou, která trápila mnoho vývojářů. I když se to dříve nezdálo jednoduché, mnoho návrhů vyžadovalo právě umístění do středu. Naštěstí, současné CSS nabízí solidní podporu pro centrování.
Podívejme se, jak vycentrovat prvek div vodorovně i svisle za pomocí Flexboxu, CSS Grid a pozicování CSS.
Základní HTML pro procvičování centrování
Následující příklady využívají minimalistický HTML dokument, aby demonstrovaly centrování pomocí CSS. Můžete použít tento základ a měnit CSS v jednotlivých sekcích, abyste viděli, jak se jednotlivé vlastnosti chovají.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Vystředění prvku Div pomocí Flexboxu
Před použitím Flexboxu k vystředění prvku div, je důležité pochopit jeho základy. Flexbox je založený na jednoduchém přístupu, což z něj činí jednu z nejpoužívanějších metod. Poskytuje flexibilní model rozvržení, který zjednodušuje zarovnávání a distribuci prostoru mezi položkami v kontejneru, což ho dělá ideálním pro centrování prvků.
Pro vystředění s použitím Flexboxu aplikujte následující CSS:
body {
display: flex;
}
body {
justify-content: center;
align-items: center;
}
div { background-color: red; }
Zobrazením výsledku v nástrojích DevTools prohlížeče Google Chrome můžete vidět, jak tyto dvě vlastnosti kontrolují zarovnání podél obou os:
Vystředění prvku Div pomocí CSS Grid
Použití CSS Grid je další efektivní metoda pro centrování prvků, poskytující precizní kontrolu nad rozvržením a zarovnáním.
body {
display: grid;
}
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
body {
place-items: center;
}
div {
background-color: blue;
}
V tomto případě jedna jediná vlastnost řídí centrální umístění prvku div na vaší stránce:
Vystředění prvku Div pomocí CSS Positioning
Pro použití vlastnosti CSS `position` k vystředění prvku div, je potřeba porozumět, jak fungují transformace CSS s přechody. Zde je krok za krokem návod s příkladem.
body {
position: relative;
}
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 technika funguje tak, že nejprve vycentruje horní roh prvku a poté ho posune o polovinu jeho rozměrů.
Flexbox, CSS Grid a CSS positioning jsou silné nástroje, které umožňují vystředit prvky na webové stránce. S Flexboxem dosáhnete vycentrování horizontálně i vertikálně pomocí několika řádků kódu. CSS Grid poskytuje mocné zarovnání ve dvou rozměrech a pomocí pozicování CSS můžete prvek vycentrovat vzhledem k jeho nadřazenému kontejneru.
S využitím těchto technik můžete zajistit, aby vaše webové stránky vypadaly profesionálně a čistě.