13 ways to vertical center

Back in the good old days, the limits of CSS were so even ”simple” things like vertical centering as a challenge, with some of us even trusted on JavaScript solutions. Se oli hauras, hyvin rajoittunut, ja aina oli se yksi poikkeus, joka sai sen epäonnistumaan.

siitä, yritimmekö asettaa tekstin viereen ikonin tai kuvan, luoda sellaisen suositun ”hero” – bannerin tai modaalisen peittokuvan, asioiden keskittäminen pystyakseliin oli aina taistelua.

mutta CSS on tullut pitkän matkan jälkeen, tarjoten paljon menetelmiä, jotka tekivät pystysuuntaisen keskityksen helpommaksi joka kerta. Tässä on yhteenveto joistakin niistä sekä niiden käyttötapauksista ja rajoituksista.

absoluuttinen paikannus ja marginaali auto

alkuaine, jolla ei ole luontaista kokoa, voidaan ”keskittää” yksinkertaisesti käyttämällä yhtä suuria arvoja ylhäältä ja alhaalta. Kun elementti on luontainen mitat Voimme käyttää 0 ylä-ja alareunassa, sitten sovelletaan marginaali auto. Tämä keskittää elementin automaattisesti:

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

Katso kynä
Keskitys 1: absolute positioning by Facundo Corradini (@facundocorradini)
on CodePen.

rajoituksena on tietenkin se, että elementin korkeus on ilmoitettava yksiselitteisesti, tai se miehittää koko säiliön.

klassinen top 50% kääntää -50%

Tämä on yksi ensimmäisistä, ja edelleen go-to, monille kehittäjille. Yksinkertainen temppu, joka perustuu sisäelementin absoluuttiseen sijoitteluun 50%: iin emoalansa yläosasta ja kääntää sen sitten 50%: iin korkeudestaan:

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

Katso kynä
Keskitys 2: Top 50 translateY -50 by Facundo Corradini (@facundocorradini)
on CodePen.

melko vankka lähestymistapa, jossa ainoa merkittävä rajoitus on käännöksen käyttö, joka saattaa tulla muiden muunnosten tielle, esimerkiksi sovellettaessa siirtymiä / animaatioita.

taulukot. Sanoin vain pöydät.

todella yksinkertainen lähestymistapa ja yksi ensimmäisistä (back in the day, kaikki oli taulukoita), käyttää käyttäytymistä taulukon solujen ja pystysuora-align keskittää elementin säiliöön.

Tämä voidaan tehdä todellisilla taulukoilla (shame, shame, shame) tai semanttisella HTML: llä, vaihtamalla elementin näyttö taulukkosoluun:

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

Katso kynä
Centering 3: tables by Facundo Corradini (@facundocorradini)
on CodePen.

Tämä toimii silloinkin, kun molemmat alkuaineet ovat tuntemattoman korkeita. Suurin rajoitus on tietenkin, jos tarvitset ei-keskitetty sisarus, ja se voi saada hankala taustarajojen.

kannattaa myös muistaa, että tämä epäonnistuu täysin ruudunlukijoissa (vaikka merkintäsi perustuu divs: iin, CSS-näytön asettaminen taulukkoon ja pöytäsoluun saa ruudunlukijat tulkitsemaan sen todelliseksi taulukoksi). Kaukana parhaasta, kun se tulee saavutettavuus.

haamuelementtimenetelmä

toinen oldi, joka ei jostain syystä ottanut kiinni, käyttää inline-blokkia, jossa haamuelementti (pseudo) on 100%: n korkeudella emoelementistä ja asettaa sitten pystyasennon ominaisuuden keskelle:

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

Katso kynä
Keskitys 4: ghost element method by Facundo Corradini (@facundocorradini)
on CodePen.

se toimii itse asiassa melko hyvin, ja huomattavin ”gotcha” on se, että se siirtää vaakasuuntaista keskipistettä vain pikkuisen oikealle, koska välilyönnit ovat aina karisevia inline-block-elementtien välillä.

tämä voidaan käsitellä kuten olisimme inline-block kysymys missä tahansa muussa yhteydessä, yksinkertaisin lähestymistapa on marginaali-left-1ch että käytin edellä (vaikka tämä ei ole 100% tarkka paitsi tasasävyisiä fontteja, koska Ch yksikkö tarkoittaa leveys ”0” merkki), tai asettamalla fontin koon 0 säiliössä sitten nollaamalla se px tai rem Elementti. Ei ainakaan paras mahdollinen.

marginaali auto on flex-kohde

vihdoin päästessään nykyaikaiseen CSS-alueeseen, flexbox esitteli melko mahtavan käyttäytymisen autojen marginaaleille. Nyt se ei keskitä elementtiä vain vaakasuoraan kuten lohkoasetteluissa, vaan keskittää sen myös pystyakseliin:

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

Katso kynä
Keskitys 5: marginaali:auto a flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

tämä taktiikka on yksi suosikeistani, koska sen yksinkertaisuus, ainoa merkittävä rajoitus on, että se toimii vain yhdellä elementillä.

Pseudo-elementit flex-kontissa

ei maailman käytännöllisin lähestymistapa, mutta myös joustavat, tyhjät pseudo-elementit voivat työntää elementin keskelle:

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

Katso kynä
Keskitys 6: pseudos on a flexbox by Facundo Corradini (@facundocorradini)
on codepen.

tästä voi olla hyötyä, kun halutaan pitää joustava väli pylväspainotteisessa flex-säiliössä, jossa on useita kohteita.

7 & 8. Align on flex-container tai flex-item

Flexbox esitteli myös todella hienoja kohdistusominaisuuksia (jotka on nyt haaroitettu omaan laatikkoalennusmoduuliinsa). Näin voimme hallita, miten kohteet sijoitetaan ja miten tyhjä tila jaetaan tavoilla, jotka olisivat vaatineet joko taikaluvut CSS: ssä tietylle määrälle elementtejä (tai varsin näppärän JS: n dynaamisille määrille).

flex-suunnasta riippuen saatamme tarvittaessa käyttää justify-content-tai align-items-toimintoa.

Kontisella:

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

See the Pen
Centering 7: align on flex-container by Facundo Corradini (@facundocorradini)
on CodePen.

on a specific flex-item:

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

See the Pen
Centering 8: align on flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

tästä ei ole montaa haittapuolta, paitsi jos vanhempien selainten tuki on tarpeen. IE 11 pitäisi toimia, mutta sen toteuttaminen flexbox on melko buginen, joten se on aina käsiteltävä erityisen huolellisesti. IE 10 vaatii lisätyötä, koska se perustuu erittelyn vanhempaan, varhaiseen luonnokseen, jossa on erilainen syntaksi, ja vaatii-ms vendor-etuliitteen.

9 & 10. Align on the grid-container tai The grid-item

CSS Grid sisältää melko lailla samat tasausvaihtoehdot kuin flexbox, joten voimme käyttää sitä grid-container:

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

See the Pen
Centering 9: align on grid-container by Facundo Corradini (@facundocorradini)
on koodinpätkä.

tai vain tietylle ruudukolle:

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

vanhan selaintuen puute on ainoa rajoitus tälle tekniikalle.

See the Pen
Centering 10: align on grid-item by Facundo Corradini (@facundocorradini)
on CodePen.

Pseudoalkiot ruudukossa

flexbox-vaihtoehdon tapaan voisimme käyttää kolmirivistä ruudukkoa pseudoalkioineen:

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

muista, että 1fr tarkoittaa itse asiassa minmaxia(auto, 1FR), joten tyhjät rivit eivät välttämättä vie kolmasosaa säiliön korkeudesta. Ne romahtaa tarpeen mukaan aina alas niiden minimaalinen arvo auto, ja ilman sisältöä, tarkoittaa 0.

See the Pen
Centering 11 : grid + pseudos by Facundo Corradini (@facundocorradini)
on CodePen.

Tämä saattaa näyttää hölmöltä lähestymistavalta, mutta sen avulla voimme helposti vetää pois yhden suosikkini CSS-ruudukon tempuista: yhdistämällä fr-rivit minmax-ykkösiin, mikä aiheuttaa tyhjien fr-ykkösten romahtamisen ensin, sitten mixmax-ykkösiin. Jenn Simmonsilla on tästä hyviä esimerkkejä.

joten, kun pseudot ottavat täysin kokoontaitettavat rivit, auto-sijoitusalgoritmi voi tehdä taikansa todellisiin elementteihimme. Paitsi jos meidän täytyy tukea IE, joka puuttuu auto-sijoitus. Joka johtaa seuraavaan menetelmään …

eksplisiittinen hilarivi

CSS-ruudukko mahdollistaa kohteiden eksplisiittisen sijoittamisen tietylle riville, joten sama ruudukon ilmoitus kuin yllä ja toiselle riville sijoitettu kohde riittää:

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

Tämä voi toimia IE10: een. Uskokaa tai älkää, IE oli yksi ensimmäisistä ja vahvempia tukijoita CSS grid, merenkulku se kaikki takaisin 2011 kanssa IE10. Se perustuu todella varhaiseen luonnokseen, jolla on täysin erilainen syntaksi, mutta saamme sen toimimaan:

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

See the Pen
Centering 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

marginaali auto ruudukossa-kohde

samoin kuin flexbox, soveltamalla marginaali-auto ruudukossa-kohde keskittää sen molemmille akseleille.

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

See the Pen
Centering 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

jotkut (todennäköiset) tulevat toteutukset

CSS-Laatikon Linjausmoduulin tason 3 määrittelyn mukaan align-content-sisällön pitäisi toimia lohkoakselilla lohkokontteja ja monisäiliöitä, joten (jos selaimet toteuttavat sen) meidän pitäisi pystyä keskittämään kyseisten säiliöiden sisältö aivan kuten teemme flex-tai grid-säiliöissä.

johtopäätös