13 måder at lodret center

tilbage i de gode gamle dage var grænserne for CSS sådan, at selv “enkle” ting som lodret Centrering udgjorde en udfordring, hvor nogle af os endda stoler på JavaScript-løsninger. Det var skrøbeligt, det var meget begrænset, og der var altid den ene undtagelse, der fik det til at mislykkes.

uanset om vi forsøgte at justere et ikon eller et billede ved siden af teksten, oprette en af de populære “helt” bannere eller et modalt overlay, var centrering af ting i den lodrette akse altid en kamp.

men CSS er kommet langt siden, hvilket giver masser af metoder, der gjorde lodret Centrering lettere hver gang. Her er en oversigt over nogle af dem sammen med deres brugssager og begrænsninger.

absolut positionering og margin auto

et element uden indre størrelse kan “centreres” ved blot at bruge lige værdier fra toppen og bunden. Når elementet har indre dimensioner, kan vi bruge 0 til top og bund, og derefter anvende margin auto. Dette vil automatisk centrere elementet:

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

se pennen
Centrering 1: absolut positionering af Facundo Corradini (@facundocorradini)
På CodePen.

begrænsningen er selvfølgelig, at elementhøjden skal udtrykkeligt deklareres, eller det vil optage hele beholderen.

den klassiske top 50% oversæt -50%

dette er en af de første, og stadig en go-to, for mange udviklere. Et simpelt trick, der stoler på absolut positionering af det indre element ved 50% fra toppen af deres forælder og derefter oversætter det op 50% af dets højde:

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

se pennen
Centrering 2: top 50 translateY -50 af Facundo Corradini (@facundocorradini)
På CodePen.

en ret solid tilgang, hvor den eneste store begrænsning er brugen af translate, der kan komme i vejen for andre transformationer, f.eks.

tabeller. JEP, jeg sagde bare borde.

en virkelig enkel tilgang og en af de første (tilbage på dagen, alt var tabeller), bruger opførelsen af tabelceller og lodret justering for at centrere et element på beholderen.

dette kan gøres med faktiske tabeller (skam, skam, skam) eller ved hjælp af semantisk HTML, skifte visning af elementet til tabelcelle:

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

se pennen
Centrering 3: tabeller af Facundo Corradini (@facundocorradini)
På CodePen.

Dette fungerer, selv når begge elementer er af ukendt højde. Den største begrænsning er selvfølgelig, hvis du har brug for et ikke-centreret søskende, og det kan blive vanskeligt med baggrundsgrænserne.

husk også, at dette helt fejler på skærmlæsere (selvom din markering er baseret på divs, vil Indstilling af CSS-skærmen til tabel og table-cell få skærmlæsere til at fortolke det som en faktisk tabel). Langt fra det bedste, når det kommer til tilgængelighed.

spøgelseselementmetoden

en anden oldie, der ikke indhentede af en eller anden grund, bruger inline-blok med et spøgelseselement (pseudo), der har 100% højde på forælderen, og derefter indstiller egenskaben lodret justering 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
Centrering 4: ghost element metode af Facundo Corradini (@facundocorradini)
På CodePen.

det fungerer faktisk ganske godt, med den mest mærkbare “gotcha” er, at den bevæger det vandrette center bare en lille smule til højre på grund af den altid cringy opførsel af mellemrum mellem inline-blokelementer.

dette kan behandles som vi ville med inline-block-problemet i enhver anden sammenhæng, idet den enkleste tilgang er margin-left-1ch, som jeg brugte ovenfor (selvom dette ikke vil være 100% nøjagtigt undtagen på Monospace-skrifttyper, da ch-enhed betyder bredden af “0” – tegnet) eller indstilling af skriftstørrelsen til 0 på beholderen og derefter nulstille den til PK eller rem på elementet. Ikke optimalt, i det mindste.

Margin auto på en flekspost

endelig kom ind i moderne CSS-område, introducerede fleksboks en ret fantastisk opførsel for auto margener. Nu vil det ikke kun centrere elementet vandret, som det gjorde i bloklayouter, men også centrere det i den lodrette akse:

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

se pennen
Centrering 5: margin:auto på en flekspost af Facundo Corradini (@facundocorradini)
På CodePen.

denne taktik er en af mine favoritter på grund af sin enkelhed, den eneste store begrænsning er, at den kun fungerer med et enkelt element.

Pseudo-elementer på en fleksbeholder

ikke den mest praktiske tilgang i verden, men vi kan også bruge fleksible, tomme pseudoelementer til at skubbe elementet til midten:

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

se pennen
Centrering 6: pseudos på en fleksboks af Facundo Corradini (@facundocorradini)
på codepen.

dette kan være nyttigt, når vi ønsker at holde en fleksibel afstand på en kolonneorienteret fleksbeholder med flere elementer.

7& 8. Juster på fleksbeholderen eller fleksposten

Fleksboksen introducerede også rigtig gode justeringsegenskaber (som nu er forked i deres eget boksjusteringsmodul). Dette giver os mulighed for at kontrollere, hvordan elementer placeres, og hvordan tom plads fordeles på måder, der ville have krævet enten magiske tal i CSS for et bestemt antal elementer (eller en ganske smart JS for dynamiske mængder).afhængigt af fleksretningen kan vi bruge justify-content eller align-items til at justere efter behov.

på beholderen:

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

se pennen
Centrering 7: Juster på fleksbeholder af Facundo Corradini (@facundocorradini)
På CodePen.

på et bestemt flekselement:

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

se pennen
Centrering 8: juster på flekselement af Facundo Corradini (@facundocorradini)
På CodePen.

ikke mange ulemper ved dette, undtagen hvis du har brug for at støtte ældre bro.sere. IE 11 skal fungere, men implementeringen af bøjlen er ret buggy, så det skal altid behandles med ekstra omhu. IE 10 kræver yderligere arbejde, da det er baseret på et ældre, tidligt udkast til specifikationen, der har forskellig syntaks, og kræver-ms-leverandørpræfikset.

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

CSS Grid indeholder stort set de samme justeringsmuligheder som fleksboks, så vi kan bruge det på grid-container:

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

se pennen
Centrering 9: juster på grid-container af Facundo Corradini (@facundocorradini)
on codepen.

eller bare på et bestemt gitterelement:

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

manglende understøttelse af ældre bro.ser er den eneste begrænsning for denne teknik.

se pennen
Centrering 10: juster på grid-item af Facundo Corradini (@facundocorradini)
På CodePen.

Pseudo-elementer på et gitter

på samme måde som fleksboksalternativet kunne vi bruge et tre-række gitter 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 betyder minmaks(auto, 1FR), så de tomme rækker tager ikke nødvendigvis en tredjedel af containerhøjden. De vil kollapse efter behov hele vejen ned til deres minimale værdi af auto, og uden indhold, betyder 0.

se pennen
Centrering 11 : gitter + pseudos af Facundo Corradini (@facundocorradini)
På CodePen.

dette kan se ud som en fjollet tilgang, men det giver os mulighed for let at trække et af mine foretrukne CSS-Gittertricks ud: at kombinere fr-rækker med minmaks-dem, hvilket får de tomme fr-dem til at kollapse først, derefter blandmaks-dem. Jenn Simmons har gode eksempler på dette.

så hvis pseudoerne tager de fuldt sammenklappelige rækker, gør det muligt for auto-placeringsalgoritmen at arbejde sin magi på vores faktiske elementer. Undtagen hvis vi har brug for at støtte IE, som mangler automatisk placering. Hvilket fører os til den næste metode…

eksplicit placering af gitterrække

CSS-gitter tillader, at emner eksplicit placeres på en bestemt række, så den samme gitterdeklaration som ovenfor og elementet placeret på den anden række 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 arbejde ned til IE10. Tro det eller ej, IE var en af de første og stærkere tilhængere af CSS grid, der sendte det helt tilbage i 2011 med IE10. Det er baseret på et virkelig tidligt udkast, der har en helt anden syntaks, men vi kan få det til at fungere:

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

se pennen
Centrering 12 : eksplicit placering på et gitter af Facundo Corradini (@facundocorradini)
På CodePen.

Margin auto på et gitterelement

på samme måde som fleksboks centrerer margin-auto på et gitterelement det på begge akser.

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

se pennen
Centrering 12 : eksplicit placering på et gitter af Facundo Corradini (@facundocorradini)
På CodePen.

nogle (sandsynlige) fremtidige implementeringer

i henhold til CSS-Boksjusteringsmodul niveau 3-specifikationen skal align-content arbejde på blokaksen for blokcontainere og multicol-containere, så (hvis bro.sere implementerer det) skal vi være i stand til at centrere indholdet af disse containere, ligesom vi gør i flekscontainere eller gittercontainere.

konklusion