13 måter å vertical center

Tilbake I de gode gamle dager, grensene FOR CSS var slik at selv «enkle» ting som vertikal sentrering utgjorde en utfordring, med noen av oss selv stole På JavaScript løsninger. Det var skjør, det var veldig begrenset, og det var alltid at ett unntak som gjorde det mislykkes.Uansett om vi prøvde å justere et ikon eller et bilde ved siden av teksten, lage et av de populære «helt» bannerne, eller et modalt overlegg, var det alltid en kamp å sentrere ting i den vertikale aksen.MEN CSS har kommet langt siden, og gir mange metoder som gjorde vertikal sentrering enklere hver gang. Her er et sammendrag av noen av dem, sammen med deres brukstilfeller og begrensninger.

Absolutt posisjonering og margin auto

et element uten egen størrelse kan «sentreres» ved ganske enkelt å bruke like verdier fra topp og bunn. Når elementet har inneboende dimensjoner, kan vi bruke 0 for topp og bunn, og deretter bruke margin auto. Dette vil automatisk sentrere elementet:

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

Se Pennen
Sentrering 1: absolutt posisjonering Av Facundo Corradini (@facundocorradini)
På CodePen.

begrensningen er selvsagt at elementhøyden må være eksplisitt deklarert, eller den vil oppta hele beholderen.

den klassiske topp 50% oversette -50%

dette er en av de første, og fortsatt en go-to, for mange utviklere. Et enkelt triks, avhengig av absolutt posisjonering av det indre elementet på 50% fra toppen av foreldrene, og deretter oversette det opp 50% av høyden:

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

Se Pennen
Sentrering 2: topp 50 translateY -50 Av Facundo Corradini (@facundocorradini)
På CodePen.

En ganske solid tilnærming, med den eneste store begrensningen er bruk av oversett som kan komme i veien for andre transformasjoner, for eksempel ved bruk av overganger/animasjoner.

Tabeller. Yup, jeg sa bare tabeller.

en veldig enkel tilnærming og en av de første (tilbake på dagen, alt var tabeller), bruker oppførselen til tabellceller og vertikal-juster for å sentrere et element på beholderen.

Dette kan gjøres med faktiske tabeller (skam, skam, skam), eller ved hjelp av semantisk HTML, bytte visning av elementet til tabellcelle:

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

Se Pennen
Sentrering 3: tabeller Av Facundo Corradini (@facundocorradini)
På CodePen.

dette fungerer selv når begge elementene er av ukjent høyde. Den store begrensningen er selvfølgelig hvis du trenger å ha en ikke-sentrert søsken, og det kan bli vanskelig med bakgrunnsgrensene.husk også at dette helt mislykkes på skjermlesere (selv om markeringen din er basert på divs, setter CSS-skjermen til tabell og tabellcelle vil få skjermlesere til å tolke det som en faktisk tabell). Langt fra det beste når det gjelder tilgjengelighet.

ghost element method

En annen oldie, som ikke fange opp uansett grunn, bruker inline-blokk med et spøkelse (pseudo) element som har 100% høyde på den overordnede, deretter sette vertical-align eiendom til midten:

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

Se Pennen
Sentrering 4: ghost element metode Av Facundo Corradini (@facundocorradini)
På CodePen.Det fungerer faktisk ganske bra, med den mest merkbare «gotcha» er at den beveger det horisontale senteret bare en liten bit til høyre, på grunn av den alltid cringy oppførselen av hvite mellomrom mellom inline-blokkelementer.

Dette kan behandles som vi ville med inline-blokk problemet i noen annen sammenheng, enkleste tilnærming er margin-venstre-1ch som jeg brukte ovenfor (selv om dette ikke vil være 100% nøyaktig unntatt på monospace fonter, som ch enhet betyr bredden på «0» tegn), eller sette skriftstørrelsen til 0 på beholderen deretter tilbakestille den til px eller rem på elementet. Ikke optimalt, for å si det sånn.

Margin auto på en flex-element

endelig komme inn i moderne CSS territorium, flexbox innført en ganske fantastisk oppførsel for auto marginer. Nå vil det ikke bare horisontalt sentrere elementet som det gjorde i blokkoppsett, men også sentrere det i den vertikale aksen:

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

Se Pennen
Sentrering 5: margin:auto på et flex-element Av Facundo Corradini (@facundocorradini)
På CodePen.denne taktikken er en av mine favoritter på grunn av sin enkelhet, den eneste store begrensningen er at den bare vil fungere med et enkelt element.

Pseudo-elementer på en flex-container

Ikke den mest praktiske tilnærmingen i verden, men vi kan også bruke fleksible, tomme pseudo elementer for å presse elementet til sentrum:

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

Se Pennen
Sentrering 6: pseudos på en flexbox Av Facundo Corradini (@facundocorradini)
på codepen.

Dette kan være nyttig når vi ønsker å beholde en fleksibel avstand på en kolonneorientert flex-beholder med flere elementer.

7 & 8. Juster på flex-beholderen eller flex-elementet

Flexbox introduserte også veldig gode justeringsegenskaper (som nå er delt inn i sin egen boksjusteringsmodul). Dette tillater oss å kontrollere hvordan elementer er plassert og hvordan tomrom er fordelt på måter som ville ha krevd enten magiske tall I CSS for et bestemt antall elementer (eller en ganske smart JS for dynamiske mengder).

Avhengig av flex-retningen, kan vi bruke justify-content eller align-items for å justere etter behov.

på beholderen:

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

Se Pennen
Sentrering 7: juster på flex-container Av Facundo Corradini (@facundocorradini)
På CodePen.

på et bestemt flex-element:

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

Se Pennen
Sentrering 8: juster på flex-element Av Facundo Corradini (@facundocorradini)
På CodePen.

Ikke mange ulemper til dette, bortsett fra hvis du trenger å støtte eldre nettlesere. IE 11 skal fungere, men implementeringen av flexbox er ganske buggy, så den bør alltid behandles med ekstra forsiktighet. IE 10 krever ekstra arbeid som det er basert på en eldre, tidlig utkast av spesifikasjonen som har forskjellig syntaks, og krever-ms leverandør prefiks.

9 & 10. Align på grid-container eller grid-element

CSS Rutenett inneholder ganske mye de samme justeringsalternativer som flexbox, slik at vi kan bruke den på grid-container:

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

Se Pennen
Sentrering 9: align på grid-container Av Facundo Corradini (@facundocorradini)
på codepen.

Eller bare på et bestemt grid-element:

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

Mangel på eldre nettleserstøtte er den eneste begrensningen for denne teknikken.

Se Pennen
Sentrering 10: juster på grid-element Av Facundo Corradini (@facundocorradini)
På CodePen.

Pseudo-elementer på et rutenett

På samme måte som flexbox-alternativet, kan vi bruke et tre-rads rutenett med pseudo-elementer:

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

Husk at 1fr faktisk betyr minmax(auto, 1fr), så de tomme radene vil ikke nødvendigvis ta en tredjedel av beholderhøyden. De vil kollapse etter behov helt ned til deres minimale verdi av auto, og uten innhold, betyr 0.

Se Pennen
Sentrering 11: rutenett + pseudos Av Facundo Corradini (@facundocorradini)
På CodePen.Dette kan se ut som en dum tilnærming, men det tillater oss å enkelt trekke av en av mine favoritt CSS Grid triks: kombinere fr rader med minmax seg, noe som vil føre til at de tomme fr seg å kollapse først, deretter mixmax seg. Jenn Simmons har gode eksempler på dette.

så, å ha pseudos ta fullt sammen rader vil tillate auto-plassering algoritmen for å arbeide sin magi på våre faktiske elementer. Unntatt hvis VI trenger Å støtte IE, som mangler automatisk plassering. Som fører oss til neste metode…

Eksplisitt grid rad plassering

CSS grid tillater elementer å være eksplisitt plassert på en bestemt rad, slik at den samme rutenettet erklæring som ovenfor, og elementet plassert på den andre raden vil være nok:

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

Denne kan arbeide ned TIL ie10. TRO det eller ei, IE var en av de første og sterkere støttespillere FOR CSS rutenett, frakt det helt tilbake i 2011 med IE10. Den er basert på et veldig tidlig utkast som har en helt annen syntaks, men vi kan få det til å fungere:

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

Se Pennen
Sentrering 12 : eksplisitt plassering på et rutenett Av Facundo Corradini (@facundocorradini)
På CodePen.

Margin auto på et grid-element

På samme måte som flexbox, søker margin-auto på et grid-element sentrerer det på begge akser.

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

Se Pennen
Sentrering 12 : eksplisitt plassering på et rutenett Av Facundo Corradini (@facundocorradini)
På CodePen.

noen (sannsynlige) fremtidige implementeringer

Ifølge CSS Box Alignment Module nivå 3 spesifikasjon, align-innhold skal fungere på blokken aksen av blokk containere og multicol containere, så (hvis nettlesere implementere det) vi bør være i stand til å sentrere innholdet i disse beholderne akkurat som vi gjør i flex eller grid containere.

Konklusjon