13 ways to vertical center

a régi szép időkben a CSS korlátai olyanok voltak, hogy még az “egyszerű” dolgok, például a vertikális Központosítás is kihívást jelentettek, néhányunk még a JavaScript megoldásokra is támaszkodott. Törékeny volt, nagyon korlátozott volt, és mindig volt egy kivétel, ami miatt kudarcot vallott.

függetlenül attól, hogy egy ikont vagy képet próbálunk a szöveg mellé igazítani, létrehozni egy ilyen népszerű “hős” bannert, vagy egy modális átfedést, a dolgok függőleges tengelyre történő központosítása mindig küzdelem volt.

de a CSS hosszú utat tett meg azóta, sok olyan módszert kínálva, amelyek minden alkalommal megkönnyítették a függőleges központosítást. Itt van egy összefoglaló néhány közülük, valamint a használati esetek és korlátozások.

abszolút pozícionálás és margó auto

egy belső méretű elem egyszerűen” középre helyezhető”, ha egyenlő értékeket használ felülről és alulról. Ha az elem belső méretekkel rendelkezik, akkor 0-t használhatunk a felső és az alsó részhez, majd alkalmazzuk a margin auto-t. Ez automatikusan központosítja az elemet:

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

lásd a tollat
Központosítás 1: abszolút elhelyezése Facundo Corradini (@facundocorradini)
A CodePen.

a korlátozás természetesen az, hogy az elem magasságát kifejezetten deklarálni kell, különben az az egész tartályt elfoglalja.

A klasszikus top 50% fordítás -50%

Ez az egyik első, és még mindig egy go-to, sok fejlesztő. Egy egyszerű trükk, támaszkodva abszolút elhelyezése a belső elem 50% – át a tetején a szülő, majd fordította fel 50% – át a magassága:

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

lásd a toll
központosító 2: felső 50 translateY -50 által Facundo Corradini (@facundocorradini)
A CodePen.

meglehetősen szilárd megközelítés, az egyetlen fő korlátozás a fordítás használata, amely akadályozhatja más átalakításokat, például átmenetek/animációk alkalmazásakor.

táblázatok. Ja, most mondtam, hogy asztalok.

egy nagyon egyszerű megközelítés, és az egyik az első (vissza a nap, minden volt táblázatok), használja a viselkedését tábla cellák és függőleges-igazítás központosítani egy elemet a konténer.

ezt meg lehet tenni a tényleges táblázatok (szégyen, szégyen, szégyen), vagy szemantikus HTML, váltás a kijelző az elem táblázat-cell:

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

lásd a toll
Központosítás 3: táblázatok által Facundo Corradini (@facundocorradini)
A CodePen.

Ez akkor is működik, ha mindkét elem ismeretlen magasságú. A fő korlátozás természetesen az, ha nem központú testvérre van szükséged, és ez bonyolult lehet A háttérhatárokkal.

ne feledje, hogy ez teljesen sikertelen a képernyőolvasóknál (még akkor is, ha a jelölés divs-en alapul, a CSS-kijelző beállítása táblázatra és táblázatcellára teszi a képernyőolvasókat, hogy tényleges táblázatként értelmezzék). A hozzáférhetőség szempontjából messze nem a legjobb.

A ghost elem módszer

egy másik régi, hogy nem felzárkózni bármilyen okból, használ inline-blokk egy szellem (pszeudo) elem, amely 100% – os magassága a szülő, majd beállítása a függőleges-align tulajdonság középre:

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

lásd a toll
központosító 4: ghost elem módszer Facundo Corradini (@facundocorradini)
A CodePen.

valójában elég jól működik, a legszembetűnőbb “megvagy” az, hogy a vízszintes középpontot csak egy kicsit jobbra mozgatja, mivel az inline-block elemek között mindig szűk a szóköz.

ezt úgy lehet kezelni, mint az inline-block problémát bármely más kontextusban, a legegyszerűbb megközelítés a margin-left-1ch, amelyet fent használtam (bár ez nem lesz 100% – ban pontos, kivéve a monospace betűtípusokat, mivel a ch egység a “0” karakter szélességét jelenti), vagy állítsa a betűméretet 0-ra a tárolón, majd állítsa vissza px-re vagy rem-re az elemen. Legalábbis nem optimális.

Margin auto egy flex-elem

végül bekerülni a modern CSS területén, flexbox bevezetett egy elég félelmetes viselkedés auto margók. Most, akkor nem csak vízszintesen középre az elem, mint tette a blokk elrendezések, hanem középre a függőleges tengely:

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

lásd a toll
központosító 5: margin:auto egy flex-elem Facundo Corradini (@facundocorradini)
A CodePen.

Ez a taktika az egyik kedvencem az egyszerűsége miatt, az egyetlen fő korlátozás, hogy csak egyetlen elemmel fog működni.

pszeudo-elemek egy flex-konténeren

nem a legpraktikusabb megközelítés a világon, de rugalmas, üres pszeudo elemeket is használhatunk az elem középpontba helyezéséhez:

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

lásd a tollat
6.Központosítás: pseudos egy flexboxon Facundo Corradini (@facundocorradini)
a codepen.

Ez akkor lehet hasznos, ha rugalmas távolságot akarunk tartani egy oszloporientált flex-konténeren, több elemgel.

7 & 8. Igazítsa a flex-konténer vagy a flex-item

Flexbox is bevezetett igazán nagy igazítási tulajdonságok(amelyek most villás a saját doboz igazítás modul). Ez lehetővé teszi számunkra, hogy ellenőrizzük az elemek elhelyezését és az üres hely elosztását oly módon, hogy egy adott számú elemhez vagy egy nagyon okos JS-hez (dinamikus mennyiségekhez) szükség lett volna a CSS-ben.

A flex-iránytól függően használhatjuk a justify-content vagy az align-items alkalmazást a szükség szerinti beállításhoz.

a tartályon:

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

lásd a toll
Központosítás 7: igazítsa a flex-konténer által Facundo Corradini (@facundocorradini)
A CodePen.

egy adott flex-elem:

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

lásd a toll
központosító 8: align on flex-elem által Facundo Corradini (@facundocorradini)
A CodePen.

nem sok hátránya ennek, kivéve, ha régebbi böngészőket kell támogatnia. Az IE 11-nek működnie kell, de a flexbox megvalósítása meglehetősen hibás, ezért mindig különös gonddal kell kezelni. Az IE 10 további munkát igényel, mivel a specifikáció régebbi, korai vázlatán alapul, amely eltérő szintaxissal rendelkezik, és megköveteli a-ms szállító előtagot.

9 & 10. Align on the grid-container or the grid-item

a CSS Grid nagyjából ugyanazokat az igazítási lehetőségeket tartalmazza, mint a flexbox, így használhatjuk a grid-container-en:

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

lásd a tollat
Központosítás 9: align on grid-container by Facundo Corradini (@facundocorradini)
on codepen.

vagy csak egy adott rács-elemen:

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

a régi böngésző támogatás hiánya az egyetlen korlátozás erre a technikára.

lásd a tollat
Központosítás 10: igazítás a rácson-elem Facundo Corradini (@facundocorradini)
A CodePen-en.

pszeudo-elemek egy rácson

a flexbox alternatívához hasonlóan használhatnánk egy háromsoros rácsot pszeudo-elemekkel:

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

ne feledje, hogy az 1fr valójában minmax-ot(auto, 1FR) jelent, így az üres sorok nem feltétlenül veszik el a konténer magasságának egyharmadát. Szükség szerint összeomlanak egészen a minimális automatikus értékükig, tartalom nélkül pedig 0-t jelentenek.

lásd a toll
központosító 11 : rács + pseudos által Facundo Corradini (@facundocorradini)
A CodePen.

Ez buta megközelítésnek tűnhet, de lehetővé teszi számunkra, hogy könnyedén lehúzzuk az egyik kedvenc CSS Rácstrükkömet: az fr sorok kombinálása a minmax-szal, ami először az üres fr-eket, majd a mixmax-okat fogja összeomlani. Jenn Simmonsnak nagyszerű példái vannak erre.

tehát, ha az álnevek a teljesen összecsukható sorokat veszik fel, akkor az automatikus elhelyezés algoritmusa varázslatosan működhet a tényleges elemeinken. Kivéve, ha támogatnunk kell az IE-t, amelyből hiányzik az automatikus elhelyezés.

Explicit rácssor elhelyezés

a CSS rács lehetővé teszi az elemek explicit elhelyezését egy adott sorban, így ugyanaz a rács deklaráció, mint fent, és a második sorban elhelyezett elem elegendő lesz:

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

Ez IE10-ig működhet. Hiszed vagy sem, az IE a CSS grid egyik első és erősebb támogatója volt, egészen 2011-ig az IE10-vel. Ez alapján egy nagyon korai tervezet, amely egy teljesen más szintaxis, de tudjuk, hogy ez a munka:

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

lásd a toll
központosító 12 : explicit elhelyezése egy rács Facundo Corradini (@facundocorradini)
A CodePen.

Margin auto egy rács-elemen

a flexboxhoz hasonlóan a margin-auto alkalmazása rács-elemen mindkét tengelyre központosítja.

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

lásd a tollat
Központosítás 12 : explicit elhelyezés egy rács Facundo Corradini (@facundocorradini)
A CodePen.

néhány (valószínű) jövőbeli megvalósítás

a CSS Box Alignment Module 3.szintű specifikációja szerint az align-contentnek a blokk konténerek és a multicol konténerek blokk tengelyén kell működnie, így (ha a böngészők végrehajtják) képesnek kell lennünk arra, hogy központosítsuk a konténerek tartalmát, mint a flex vagy grid konténerekben.

következtetés