13 sätt att vertikal center

tillbaka i den gamla goda tiden, gränserna för CSS var sådana att även ”enkla” saker som vertikal centrering utgjorde en utmaning, med några av oss även förlita sig på JavaScript-lösningar. Det var bräckligt, det var mycket begränsat, och det fanns alltid det enda undantaget som gjorde att det misslyckades.

oavsett om vi försökte anpassa en ikon eller bild bredvid texten, skapa en av de populära ”hjälte” banners, eller en modal overlay, centrering saker i den vertikala axeln var alltid en kamp.

men CSS har kommit långt sedan dess, vilket ger många metoder som gjorde vertikal centrering enklare varje gång. Här är en sammanfattning av några av dem, tillsammans med deras användningsfall och begränsningar.

absolut positionering och marginal auto

ett element utan inneboende storlek kan ”centreras” genom att helt enkelt använda lika värden från toppen och botten. När elementet har inneboende dimensioner kan vi använda 0 för topp och botten, använd sedan margin auto. Detta kommer automatiskt att centrera elementet:

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

se pennan
centrering 1: absolut positionering av Facundo Corradini (@facundocorradini)
på CodePen.

begränsningen är naturligtvis att elementhöjden måste uttryckligen deklareras, eller det kommer att uppta hela behållaren.

den klassiska topp 50% översätta -50%

detta är en av de första, och fortfarande en go-to, För många utvecklare. Ett enkelt trick, som förlitar sig på absolut positionering av det inre elementet vid 50% från toppen av sin förälder och sedan översätter det upp 50% av sin höjd:

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

se pennan
centrering 2: topp 50 translateY -50 av Facundo Corradini (@facundocorradini)
på CodePen.

ett ganska solidt tillvägagångssätt, med den enda stora begränsningen är användningen av translate som kan komma i vägen för andra transformationer, t.ex. vid tillämpning av övergångar/animationer.

tabeller. Japp, jag sa bara tabeller.

ett riktigt enkelt tillvägagångssätt och en av de första (tillbaka på dagen, allt var tabeller), använder beteendet hos tabellceller och vertikal-justera för att centrera ett element på behållaren.

detta kan göras med faktiska tabeller (skam, skam, skam) eller med semantisk HTML, byta visning av elementet till tabellcell:

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

se pennan
centrering 3: tabeller av Facundo Corradini (@facundocorradini)
på CodePen.

detta fungerar även när båda elementen är av okänd höjd. Den stora begränsningen är naturligtvis om du behöver ha en icke-centrerad syskon, och det kan bli svårt med bakgrundsgränserna.

tänk också på att detta helt misslyckas på skärmläsare (även om din markering är baserad på divs, ställer CSS-skärmen till Tabell och tabellcell gör att skärmläsare tolkar det som en faktisk tabell). Långt ifrån det bästa när det gäller tillgänglighet.

ghost element method

en annan oldie, som inte kom ikapp av någon anledning, använder inline-block med ett ghost (pseudo) – element som har 100% höjd på föräldern och ställer sedan in egenskapen vertical-align till mitten:

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

se pennan
centrering 4: ghost element metod genom Facundo Corradini (@facundocorradini)
på CodePen.

det fungerar faktiskt ganska bra, med den mest märkbara ”gotcha” som att den flyttar det horisontella centrumet bara en liten bit till höger, på grund av det alltid krångliga beteendet hos whitespace mellan inline-blockelement.

detta kan hanteras som vi skulle med inline-block-problemet i något annat sammanhang, det enklaste tillvägagångssättet är marginalen-vänster – 1ch som jag använde ovan (även om detta inte kommer att vara 100% korrekt utom på monospace-teckensnitt, eftersom ch-enheten betyder bredden på ”0” – tecknet) eller ställer in teckenstorleken till 0 på behållaren och återställer den sedan till px eller rem på elementet. Inte optimalt, minst sagt.

Marginal auto på en flex-item

slutligen komma in i modern CSS territorium, Flexbox infört en ganska häftigt beteende för auto marginaler. Nu kommer det inte bara att centrera elementet horisontellt som det gjorde i blocklayouter, utan också centrera det i den vertikala axeln:

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

se pennan
centrering 5: marginal:auto på ett flex-objekt av Facundo Corradini (@facundocorradini)
på CodePen.

denna taktik är en av mina favoriter på grund av dess enkelhet, den enda stora begränsningen är att den bara fungerar med ett enda element.

Pseudoelement på en flexbehållare

inte det mest praktiska tillvägagångssättet i världen, men vi kan också använda flexibla, tomma pseudoelement för att skjuta elementet till mitten:

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

se pennan
centrering 6: pseudos på en flexbox av Facundo Corradini (@facundocorradini)
på CodePen.

detta kan vara användbart när vi vill hålla ett flexibelt avstånd på en kolumnorienterad flexbehållare med flera objekt.

7 & 8. Justera på flex-behållaren eller flex-item

Flexbox introducerade också riktigt bra justeringsegenskaper (som nu gafflas i sin egen boxjusteringsmodul). Detta gör att vi kan styra hur objekt placeras och hur tomt utrymme distribueras på sätt som skulle ha krävt antingen magiska tal i CSS för ett visst antal element (eller en ganska smart JS för dynamiska mängder).

beroende på flexriktningen kan vi använda justify-content eller align-items för att justera efter behov.

på behållaren:

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

se pennan
centrering 7: Justera på flex-behållare av Facundo Corradini (@facundocorradini)
på CodePen.

på ett visst flex-objekt:

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

se pennan
centrering 8: Justera på flex-objekt av Facundo Corradini (@facundocorradini)
på CodePen.

inte många nackdelar med detta, förutom om du behöver stödja äldre webbläsare. IE 11 borde fungera, men dess implementering av flexbox är ganska buggy, så det bör alltid behandlas med extra försiktighet. IE 10 kräver ytterligare arbete eftersom det bygger på ett äldre, tidigt utkast till specifikationen som har olika syntax och kräver-ms-leverantörsprefixet.

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

CSS Grid innehåller ungefär samma justeringsalternativ som flexbox, så vi kan använda den på grid-container:

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

se pennan
centrering 9: align på grid-container av Facundo Corradini (@facundocorradini)
på CodePen.

eller bara på ett specifikt grid-objekt:

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

brist på äldre webbläsarstöd är den enda begränsningen för denna teknik.

se pennan
centrering 10: justera på grid-objekt av Facundo Corradini (@facundocorradini)
på CodePen.

Pseudoelement på ett rutnät

På samma sätt som flexbox-alternativet kan vi använda ett treradigt rutnät med pseudoelement:

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

Kom ihåg att 1FR faktiskt betyder minmax(auto, 1FR), så de tomma raderna tar inte nödvändigtvis en tredjedel av behållarens höjd. De kommer att kollapsa efter behov hela vägen ner till deras minimala värde av auto, och utan innehåll, betyder 0.

se pennan
centrering 11 : rutnät + pseudos av Facundo Corradini (@facundocorradini)
på CodePen.

det här kan se ut som ett dumt tillvägagångssätt, men det gör det möjligt för oss att enkelt dra av ett av mina favorit CSS-Rutnätstrick: kombinera fr-rader med minmax, vilket kommer att få de tomma fr-raderna att kollapsa först, sedan mixmax. Jenn Simmons har bra exempel på detta.

så att pseudoerna tar de helt hopfällbara raderna gör det möjligt för autoplaceringsalgoritmen att arbeta med sin magi på våra faktiska element. Förutom om vi behöver stödja IE, som saknar automatisk placering. Vilket leder oss till nästa metod…

Explicit rutnätsradplacering

CSS grid tillåter att objekt uttryckligen placeras på en specifik rad, så samma rutnätsdeklaration som ovan och objektet som placeras på den andra raden räcker:

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

den här kan arbeta ner till IE10. Tro det eller ej, IE var en av de första och starkare supportrarna för CSS grid och skickade den hela vägen tillbaka 2011 med IE10. Det är baserat på ett riktigt tidigt utkast som har en helt annan syntax, men vi kan få det att fungera:

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

se pennan
centrering 12 : explicit placering på ett rutnät av Facundo Corradini (@facundocorradini)
på CodePen.

Margin auto på ett grid-item

På samma sätt som flexbox, tillämpar margin-auto på ett grid-item centrerar det på båda axlarna.

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

se pennan
centrering 12 : explicit placering på ett rutnät av Facundo Corradini (@facundocorradini)
på CodePen.

vissa (sannolika) framtida implementeringar

enligt CSS Box Alignment Module level 3-specifikationen bör align-content fungera på blockaxeln för blockbehållare och multicol-behållare, så (om webbläsare implementerar det) borde vi kunna centrera innehållet i dessa behållare precis som vi gör i flex-eller grid-Behållare.

slutsats