13 manieren om verticaal te centreren

in de goede oude dagen waren de grenzen van CSS zodanig dat zelfs “eenvoudige” dingen zoals verticaal centreren een uitdaging vormden, waarbij sommigen van ons zelfs vertrouwden op JavaScript-oplossingen. Het was fragiel, het was erg beperkt, en er was altijd die ene uitzondering die het liet mislukken.

of we nu een pictogram of afbeelding naast de tekst proberen uit te lijnen, een van die populaire “hero” banners maken, of een modale overlay, het centreren van dingen in de verticale as was altijd een worsteling.

maar CSS heeft sindsdien een lange weg afgelegd, met veel methoden die verticaal centreren elke keer makkelijker maakten. 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 grootte kan “gecentreerd” worden door simpelweg gelijke waarden van boven en onder te gebruiken. Als het element intrinsieke dimensies heeft kunnen we 0 gebruiken voor boven en onder, pas dan Marge auto toe. Dit zal het element Automatisch centreren:

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

zie de Pen
Centreren 1: absolute positionering door Facundo Corradini (@facundocorradini)
Op CodePen.

de beperking is natuurlijk dat de hoogte van het element expliciet moet worden aangegeven, anders zal het de hele container beslaan.

de klassieke top 50% vertaal -50%

Dit is een van de eerste, en nog steeds een go-to, voor veel ontwikkelaars. Een eenvoudige truc, gebaseerd op een absolute positionering van het binnenste element op 50% van de bovenkant van hun ouder, en het vervolgens te vertalen tot 50% van zijn hoogte:

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

zie de Pen
centrering 2: top 50 translateY -50 door Facundo Corradini (@facundocorradini)
Op CodePen.

een vrij solide aanpak, met de enige belangrijke beperking is het gebruik van translate dat andere transformaties in de weg zou kunnen staan, bijvoorbeeld bij het toepassen van overgangen/animaties.

tabellen. Ja, ik zei net tafels.

een heel eenvoudige aanpak en een van de eerste (vroeger was alles tabellen), is het gebruik van het gedrag van tabelcellen en verticaal uitlijnen om een element op de container te centreren.

dit kan worden gedaan met werkelijke tabellen (shame, shame, shame), of met behulp van semantische HTML, het omzetten van de weergave van het element naar tabelcel:

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

zie de Pen
Centreren 3: tabellen door Facundo Corradini (@facundocorradini)
Op CodePen.

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

houd er ook rekening mee dat dit volledig mislukt op schermlezers (zelfs als uw opmaak gebaseerd is op div ‘ s, zal het instellen van de CSS-weergave op tabel en table-cell schermlezers het laten interpreteren als een echte tabel). Verre van het beste als het gaat om toegankelijkheid.

The ghost element method

een ander oudje, dat om welke reden dan ook geen inhaalslag heeft, gebruikt inline-block met een ghost (pseudo) element dat 100% hoogte van de ouder heeft, en zet vervolgens de vertical-align eigenschap op midden:

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

zie de Pen
centrering 4: ghost element methode door Facundo Corradini (@facundocorradini)
Op CodePen.

Het werkt eigenlijk heel goed, met de meest opvallende “gotcha” is dat het horizontale centrum slechts een klein beetje naar rechts beweegt, vanwege het altijd krullende gedrag van witruimte tussen inline-block elementen.

dit kan behandeld worden zoals we zouden doen met het inline-block probleem in elke andere context, de eenvoudigste aanpak is de marge-left-1ch die ik hierboven gebruikte (hoewel dit niet 100% accuraat zal zijn, behalve op monospace lettertypen, omdat ch-eenheid de breedte van het “0” teken betekent), of het instellen van de lettergrootte op 0 op de container en het resetten naar px of rem op het element. Niet optimaal, tenminste.

Marge auto op een flex-item

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

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

zie de Pen
Centreren 5: Marge:auto op een flex-item door Facundo Corradini (@facundocorradini)
Op CodePen.

deze tactiek is een van mijn favorieten vanwege de eenvoud, de enige belangrijke 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
Centreren 6: pseudo ‘ s op een flexbox door Facundo Corradini (@facundocorradini)
op CodePen.

dit kan handig zijn als we een flexibele spatiëring willen behouden op een kolomgeoriënteerde Flex-container met meerdere items.

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

Flexbox heeft ook echt geweldige uitlijneigenschappen geïntroduceerd (die nu zijn gevorkt in hun eigen box-uitlijnmodule). Dit stelt ons in staat om te bepalen hoe items worden geplaatst en hoe lege ruimte wordt verdeeld op manieren die ofwel magische getallen in CSS voor een bepaald aantal elementen zou hebben vereist (of een heel slimme JS voor dynamische bedragen).

afhankelijk van de flex-direction, kunnen we gebruik maken van justify-content of align-items aan te passen als dat nodig is.

Op de container:

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

zie de Pen
centrering 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
centrering 8: uitlijnen op flex-item door Facundo Corradini (@facundocorradini)
Op CodePen.

niet veel nadelen hiervan, behalve als u oudere browsers moet ondersteunen. IE 11 moet werken, maar de uitvoering van flexbox is vrij buggy, dus het moet altijd worden behandeld met extra zorg. IE 10 vereist extra werk als het is gebaseerd op een oudere, vroege ontwerp van de specificatie die verschillende syntaxis heeft, en vereist de-ms vendor prefix.

9 & 10. Align on the grid-container or the 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
centrering 9: align on grid-container by Facundo Corradini (@facundocorradini)
on CodePen.

of gewoon op een specifiek raster-item:

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

gebrek aan oudere browserondersteuning is de enige beperking voor deze techniek.

zie de Pen
centrering 10: uitlijnen op raster-item door Facundo Corradini (@facundocorradini)
Op CodePen.

Pseudo-elementen op een raster

net als het flexbox-alternatief zouden we een drie-rij raster met pseudo-elementen kunnen gebruiken:

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

onthoud dat 1fr eigenlijk minmax(auto, 1fr) betekent, zodat de lege rijen niet noodzakelijk een derde van de containerhoogte nemen. Ze zullen instorten als dat nodig is helemaal tot aan hun minimale waarde van auto, en zonder inhoud, betekent 0.

zie de Pen
centrering 11 : grid + pseudos 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-raster trucs uit te voeren: het combineren van fr-rijen met minmax-rijen, waardoor de lege fr-rijen eerst instorten, dan de mixmax-rijen. Jenn Simmons heeft daar goede voorbeelden van.

dus, als de pseudo ‘ s de volledig inklapbare rijen nemen, zal het auto-placement algoritme zijn magie laten werken op onze werkelijke elementen. Behalve als we nodig hebben om IE te ondersteunen, die niet automatisch plaatsing. Dat leidt ons naar de volgende methode…

expliciete rasterrijplaatsing

CSS-raster maakt het mogelijk om items expliciet op een specifieke rij te plaatsen, dus dezelfde rasterdeclaratie als hierboven en het item 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 tot IE10 werken. Geloof het of niet, IE was een van de eerste en sterkere supporters voor CSS grid, verzending het helemaal terug in 2011 met IE10. Het is gebaseerd op een zeer vroege ontwerp dat een compleet andere syntaxis 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
Centreren 12 : expliciete plaatsing op een raster door Facundo Corradini (@facundocorradini)
Op CodePen.

Marge auto op een raster-item

vergelijkbaar met flexbox, het toepassen van Marge-auto op een raster-item centreert het op beide assen.

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

zie de Pen
Centreren 12 : expliciete plaatsing op een raster door Facundo Corradini (@facundocorradini)
Op CodePen.

sommige (waarschijnlijke) toekomstige implementaties

volgens de CSS Box Alignment Module Level 3 specificatie, zou align-content moeten werken op de blokas van blokcontainers 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