13 způsobů, jak vertikální centrum

Zpět na staré dobré časy, limity CSS byly takové, že i „jednoduché“ věci, jako je vertikální centrování představuje výzvu, s některými z nás dokonce spoléhat na JavaScript řešení. Bylo to křehké, bylo to velmi omezené, a vždy existovala jedna výjimka, která způsobila, že to selhalo.

Ať už jsme se snažili sladit ikonu nebo obrázek vedle textu, vytvořit jeden z těch populární „hrdina“ bannery, nebo modální překrytí, centrování věcí, ve vertikální ose byl vždy boj.

ale CSS má za sebou dlouhou cestu, protože poskytuje mnoho metod, které dělaly vertikální Centrování jednodušší pokaždé. Zde je shrnutí některých z nich, spolu s jejich případy použití a omezeními.

absolutní polohování a marže auto

prvek bez vnitřní velikosti může být“ vycentrován “ jednoduchým použitím stejných hodnot shora a zdola. Pokud má prvek vnitřní rozměry, můžeme použít 0 pro horní a dolní část, pak použít margin auto. To bude automagicky centrum prvek:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Viz Pen
Centrování 1: absolutní umístění Facundo Corradini (@facundocorradini)
Na CodePen.

omezení samozřejmě spočívá v tom, že výška prvku musí být explicitně deklarována, nebo bude zabírat celý kontejner.

klasický top 50% translate -50%

Toto je jeden z prvních a stále go-to pro mnoho vývojářů. Jednoduchý trik, se spoléhat na absolutní umístění vnitřního prvku, na 50% z vrcholu své rodiče, pak to přeložit až 50% jeho výšky:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Viz Pen
Centrování 2: horní 50 translateY -50 Facundo Corradini (@facundocorradini)
Na CodePen.

poměrně solidní přístup, s jediným zásadním omezením je použití překládat, které by mohly dostat do cesty jiné mění, např. při použití přechody/animace.

tabulky. Jo, právě jsem řekl stoly.

opravdu jednoduchý přístup a jeden z prvních (zpět v den, všechno bylo tabulky), používá chování buněk tabulky a vertikální zarovnání vycentrovat prvek na kontejneru.

To může být provedeno s aktuální tabulky (hanba, hanba, hanba), nebo pomocí sémantické HTML, přepínání zobrazení prvku table-cell:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Viz Pen
Centrování 3: tabulky podle Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

to funguje, i když oba prvky mají neznámou výšku. Hlavním omezením je samozřejmě, pokud potřebujete mít nesoustředěného sourozence, a mohlo by to být složité s limity pozadí.

Také, mějte na paměti tato zcela nezdaří, na obrazovce čtenáři (i když označení je založena na divs, nastavení CSS zobrazení tabulky a tabulky-buňka bude obrazovka čtenáři interpretovat jako skutečná tabulka). Daleko od nejlepších, pokud jde o Přístupnost.

duch element method

Další oldie, že nestihla chytit z jakéhokoli důvodu, je použití inline-block s duchem (pseudo) elementu, který má 100% výška rodič, pak nastavení vertikální-align vlastnost střední:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Viz Pen
Centrování 4: metoda duch element Facundo Corradini (@facundocorradini)
Na CodePen.

ve skutečnosti To funguje docela dobře, s nejvíce patrné „mám tě“ je, že se pohybuje vodorovně jen trochu doprava, protože vždy směšné chování mezery mezi inline-block prvků.

To může být řešeno tak, jak bychom s inline-block problém v nějaké jiné souvislosti, nejjednodušší přístup je margin-left -1ch, že jsem použil výše (i když to nebude 100% přesné, až na monospace fonty, jako ch jednotku znamená šířku „0“ znak), nebo nastavení velikosti písma na 0 na obalu a pak jej resetovat, aby px nebo rem na prvek. Není to optimální, přinejmenším.

Margin auto na flex-item

konečně dostat se do moderního CSS území, flexbox představil docela úžasné chování pro auto marže. Teď to bude nejen vodorovně na střed prvek, jako tomu bylo v rozložení bloku, ale také centrum ve svislé ose:

.container{ display:flex;}.element{ margin:auto;}

Viz Pen
Centrování 5: margin:auto na flex-item tím, že Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

tato taktika je jedním z mých oblíbených kvůli své jednoduchosti, jediným hlavním omezením je, že bude pracovat pouze s jedním prvkem.

Pseudo-prvky na flex-kontejner

Není nejpraktičtější přístup ve světě, ale můžeme také použít flexibilní, prázdné pseudo prvky, aby se zasadila prvek do centra:

.container{ display:flex;}.element{ margin:auto;}

Viz Pen
Centrování 6: pseudos na flexbox tím, že Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

to může být užitečné, pokud chceme zachovat flexibilní mezery na sloupcově orientovaném flex-kontejneru s více položkami.

7 & 8. Zarovnat na flex-container nebo flex-item

Flexbox také představil opravdu skvělé vlastnosti zarovnání (které jsou nyní vidlicové do vlastního modulu zarovnání boxu). To nám umožňuje kontrolovat, jak jsou položky umístěny a jak prázdný prostor je distribuován v způsoby, které by vyžadovaly buď magická čísla v CSS pro určitý počet prvků (nebo docela chytrý JS pro dynamické množství).

V závislosti na směru flex můžeme použít položky justify-content nebo align-items k úpravě podle potřeby.

na obalu:

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

viz pero
Centrování 7: zarovnat na flex-container Facundo Corradini (@facundocorradini)
Na CodePen.

Na konkrétní flex-položky:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Viz Pen
Centrování 8: zarovnat na flex-item tím, že Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

není mnoho nevýhod, s výjimkou případů, kdy potřebujete podporovat starší prohlížeče. IE 11 by měl fungovat, ale jeho implementace flexboxu je docela buggy, takže by se s ním mělo vždy zacházet opatrně. IE 10 vyžaduje další práci, protože je založen na starším, časném návrhu SPECIFIKACE, který má jinou syntaxi a vyžaduje předponu-ms vendor.

9 & 10. Zarovnat na mřížku-kontejner nebo grid-položka

CSS Grid obsahuje skoro stejné zarovnání jako flexbox, tak můžeme použít na mřížky-balení:

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

Viz Pen
Centrování 9: zarovnat na mřížku-kontejner o Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

nebo jen na konkrétní položce mřížky:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

nedostatek starší podpory prohlížeče je jediným omezením pro tuto techniku.

viz pero
Centrování 10: align on grid-item by Facundo Corradini (@facundocorradini)
on CodePen.

Pseudo-prvky na mřížce

Podobně jako flexbox alternativní, můžeme použít tři-řádku mřížky s pseudo-elementy:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Pamatujte si, že 1fr vlastně znamená, minmax(auto, 1fr), takže prázdné řádky se nemusí nutně trvat jednu třetinu kontejneru výšky. Zhroutí se podle potřeby až na jejich minimální hodnotu auto, a bez obsahu, znamená 0.

viz pero
Centrování 11: grid + pseudos od Facundo Corradini (@facundocorradini)
Na CodePen.

může to vypadat jako hloupý přístup, ale umožňuje nám to snadno vytáhnout jeden z mých oblíbených triků CSS Grid: kombinovat řádky fr S minmax, což způsobí, že se prázdné fr nejprve zhroutí, pak ty mixmax. Jenn Simmons má k tomu skvělé příklady.

takže když pseudos vezme plně skládací řádky, umožní algoritmu automatického umístění pracovat na magii na našich skutečných prvcích. S výjimkou případů, kdy potřebujeme podporovat IE, které postrádá automatické umístění. Což nás vede k další metodě.

Explicitní mřížky řádek umístění

CSS grid umožňuje položky, které mají být výslovně uveden na zvláštním řádku, takže stejnou mřížku, prohlášení jak je uvedeno výše a položka umístěna na druhém řádku bude dost:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Tento člověk může pracovat na IE10. Věřte tomu nebo ne, IE byl jedním z prvních a silnějších příznivců CSS grid, který jej přepravil až do roku 2011 s IE10. Je založen na opravdu brzy návrh, který má zcela jinou syntaxi, ale můžeme, aby to fungovalo:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Viz Pen
Centrování 12 : explicitní umístění na mřížce Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

Margin auto na mřížce-item

podobně jako flexbox, použití margin-auto na mřížce-item vycentruje na obou osách.

.container{ display: grid;}.element{ margin: auto;}

Viz Pen
Centrování 12 : explicitní umístění na mřížce Facundo jiří šalamoun autor / ka (@facundocorradini)
na CodePen.

Některé (pravděpodobně) budoucí implementace

Podle CSS Box Zarovnání Module level 3 specifikace, zarovnat obsah by měl fungovat na bloku osy bloku kontejnerů a multicol kontejnery, tak (v případě prohlížeče implementovat) bychom měli být schopni centru obsah těchto kontejnerů, stejně jako my v flex nebo sítě kontejnerů.

závěr