13 manieren om verticaal te centreren

In de goede oude tijd waren de beperkingen van CSS zodanig dat zelfs “eenvoudige” dingen als verticaal centreren een uitdaging vormden, waarbij sommigen van ons zelfs vertrouwden op JavaScript-oplossingen. Het was kwetsbaar, het was erg beperkt, en er was altijd die ene uitzondering die het deed mislukken.

Of we nu probeerden een pictogram of afbeelding naast de tekst uit te lijnen, een van die populaire “held” banners te maken, of een modal overlay, het centreren van dingen in de verticale as was altijd een strijd.

Maar CSS heeft sindsdien een lange weg afgelegd, met veel methoden die verticaal centreren elke keer eenvoudiger maken. Hier is een samenvatting van een aantal van hen, samen met hun use cases en beperkingen.

Absolute positionering en marge auto

Een element zonder intrinsieke afmetingen kan worden “gecentreerd” door simpelweg gelijke waarden van de boven- en onderkant te gebruiken. Als het element intrinsieke afmetingen heeft, kunnen we 0 gebruiken voor boven en onder, en dan marge auto toepassen. Hierdoor wordt het element automatisch gecentreerd:

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

Zie de Pen
Centering 1: absolute positionering door Facundo Corradini (@facundocorradini)
op CodePen.

De beperking is, natuurlijk, dat de element hoogte expliciet moet worden aangegeven, of het zal de hele container bezetten.

De klassieke top 50% vertalen -50%

Dit is een van de eerste, en nog steeds een go-to, voor veel ontwikkelaars. Een eenvoudige truc, die berust op absolute positionering van het binnenelement op 50% van de bovenkant van hun parent, en dan het 50% van zijn hoogte omhoog vertaalt:

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

Zie de Pen
Centering 2: top 50 vertalenY -50 door Facundo Corradini (@facundocorradini)
op CodePen.

Een vrij solide aanpak, met als enige grote beperking het gebruik van translate dat in de weg kan staan van andere transformaties, bijvoorbeeld bij het toepassen van overgangen/animaties.

Tabellen. Yup, ik zei net tabellen.

Een heel eenvoudige aanpak en een van de eerste (vroeger waren alles tabellen), is het gebruik van het gedrag van tabelcellen en vertical-align om een element op de container te centreren.

Dit kan worden gedaan met echte tabellen (schaamte, schaamte, schaamte), of met behulp van semantische HTML, waarbij de weergave van het element wordt omgeschakeld naar tabel-cel:

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

Zie de Pen
Centering 3: tabellen door Facundo Corradini (@facundocorradini)
op CodePen.

Dit werkt zelfs als beide elementen van onbekende hoogte zijn. De grootste beperking is natuurlijk als je een niet-gecentreerde broer of zus wilt hebben, en het kan lastig worden met de achtergrondlimieten.

Ook moet je bedenken dat dit totaal niet werkt op schermlezers (zelfs als je markup is gebaseerd op divs, zal het instellen van de CSS weergave op tabel en tabel-cel schermlezers het laten interpreteren als een echte tabel). Verre van de beste als het gaat om toegankelijkheid.

De ghost element methode

Een ander oudje, dat om wat voor reden dan ook niet is doorgebroken, is het gebruik van inline-block met een ghost (pseudo) element dat 100% hoogte heeft van de parent, en dan de vertical-align eigenschap op middle zetten:

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

Zie de Pen
Centering 4: ghost element methode van Facundo Corradini (@facundocorradini)
op CodePen.

Het werkt eigenlijk best goed, met als meest opvallende “gotcha” dat het horizontale centrum een klein beetje naar rechts verschuift, vanwege het altijd kriebelige gedrag van witruimte tussen inline-block elementen.

Dit kan op dezelfde manier worden aangepakt als het inline-block probleem in elke andere context, met als eenvoudigste aanpak de margin-left -1ch die ik hierboven heb gebruikt (hoewel dit niet 100% accuraat zal zijn, behalve bij monospace fonts, omdat ch de breedte van het “0” karakter betekent), of door de font-grootte op 0 te zetten in de container en het dan terug te zetten naar px of rem in het element.

Automarge op een flex-item

Eindelijk in modern CSS-gebied, introduceerde flexbox een behoorlijk ontzagwekkend gedrag voor de automatische marges. Nu zal het niet alleen het element horizontaal centreren zoals het deed in blok lay-outs, maar ook centreren in de verticale as:

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

Zie de Pen
Centering 5: margin:auto op een flex-item door Facundo Corradini (@facundocorradini)
op CodePen.

Deze tactiek is een van mijn favorieten vanwege zijn eenvoud, de enige grote beperking is dat het alleen werkt met een enkel element.

Pseudo-elementen op een flex-container

Niet de meest praktische aanpak in de wereld, maar we kunnen ook flexibele, lege pseudo-elementen gebruiken om het element naar het midden te duwen:

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

Zie de Pen
Centering 6: pseudo’s op een flexbox door Facundo Corradini (@facundocorradini)
op CodePen.

Dit kan handig zijn als we een flexibele spatiëring willen houden op een kolom-georiënteerde flex-container met meerdere items.

7 & 8. Uitlijnen op de flex-container of het flex-item

Flexbox heeft ook geweldige uitlijningseigenschappen geïntroduceerd (die nu zijn gevorkt in hun eigen uitlijningsmodule voor boxen). Hiermee kunnen we bepalen hoe items worden geplaatst en hoe lege ruimte wordt verdeeld op manieren die ofwel magische getallen in CSS zouden hebben vereist voor een specifiek aantal elementen (of een heel slimme JS voor dynamische hoeveelheden).

Afhankelijk van de flex-richting, zouden we justify-content of align-items kunnen gebruiken om aan te passen als dat nodig is.

Op de container:

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

Zie de Pen
Centeren 7: uitlijnen op flex-container door Facundo Corradini (@facundocorradini)
op CodePen.

Op een bepaald flex-item:

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

Zie de Pen
Centreren 8: uitlijnen op flex-item door Facundo Corradini (@facundocorradini)
op CodePen.

Niet veel nadelen aan dit, behalve als je nodig hebt om oudere browsers te ondersteunen. IE 11 zou moeten werken, maar de implementatie van flexbox is nogal buggy, dus het moet altijd met extra zorg worden behandeld. IE 10 vereist extra werk omdat het gebaseerd is op een oudere, vroege versie van de specificatie die een andere syntaxis heeft, en de -ms vendor prefix vereist.

9 & 10. Uitlijnen op de grid-container of het grid-item

CSS Grid bevat vrijwel dezelfde uitlijningsopties als flexbox, dus we kunnen het gebruiken op de grid-container:

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

Zie de Pen
Centering 9: uitlijnen op grid-container door Facundo Corradini (@facundocorradini)
op CodePen.

Of alleen op een specifiek grid-item:

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

Het gebrek aan legacy browser ondersteuning is de enige beperking voor deze techniek.

Zie de Pen
Centeren 10: uitlijnen op grid-item door Facundo Corradini (@facundocorradini)
op CodePen.

Pseudo-elementen op een raster

Gelijk aan het flexbox-alternatief kunnen we een drie-rijig raster met pseudo-elementen gebruiken:

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

Bedenk dat 1fr eigenlijk minmax(auto, 1fr) betekent, dus de lege rijen zullen niet noodzakelijkerwijs eenderde van de containerhoogte innemen. Ze zullen naar behoefte helemaal inzakken tot hun minimale waarde van auto, en zonder inhoud betekent dat 0.

Zie de Pen
Centering 11 : raster + pseudo’s door Facundo Corradini (@facundocorradini)
op CodePen.

Dit lijkt misschien een domme aanpak, maar het stelt ons in staat om gemakkelijk een van mijn favoriete CSS Grid trucs uit te halen: het combineren van fr rijen met minmax rijen, waardoor de lege fr rijen eerst zullen instorten, en daarna de mixmax rijen. Jenn Simmons heeft hier goede voorbeelden van.

Dus, door de pseudo’s de volledig collapsible rijen te laten nemen, kan het auto-placement algoritme zijn magie werken op onze eigenlijke elementen. Behalve als we IE moeten ondersteunen, die geen auto-placement heeft. Dat brengt ons bij de volgende methode…

Expliciete raster rij plaatsing

CSS raster staat toe dat items expliciet op een specifieke rij worden geplaatst, dus dezelfde raster declaratie als hierboven en het item geplaatst op de tweede rij is voldoende:

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

Deze kan werken tot IE10. Geloof het of niet, maar IE was een van de eerste en sterkste voorstanders van CSS grid, en verscheepte het helemaal terug in 2011 met IE10. Het is gebaseerd op een heel vroege versie die een heel andere syntax heeft, maar we kunnen het laten werken:

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

Zie de Pen
Centering 12 : expliciete plaatsing op een grid door Facundo Corradini (@facundocorradini)
op CodePen.

Marge-auto op een grid-item

Gelijk aan flexbox, centreert het toepassen van marge-auto op een grid-item het op beide assen.

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

Zie de Pen
Centering 12 : expliciete plaatsing op een grid door Facundo Corradini (@facundocorradini)
op CodePen.

Enige (waarschijnlijke) toekomstige implementaties

Volgens de CSS Box Alignment Module level 3 specificatie, zou align-content moeten werken op de blok as van blok containers en multicol containers, dus (als browsers het implementeren) zouden we in staat moeten zijn om de inhoud van die containers te centreren, net zoals we dat doen in flex of grid containers.

Conclusie