Dat moet toch niet zo lastig zijn? Dat zou je inderdaad denken, maar als je iets langer met HTML/CSS bezig bent, weet je dat dat wel zo is. Vreemd genoeg is daar nooit iets voor ingebouwd. Sowieso het maken van lay-outs is nooit een sterk punt geweest, omdat de oorspronkelijke uitvinders van HTML iets wilden maken voor het uitwisselen van tekstbestanden, met hyperlinks. Ze hebben er nooit bij stilgestaan dat men later iets met vormgeving zou willen.
Afijn, dit heeft er toe geleid dat er tot voor enkele jaren niets was waarmee je dat makkelijk kunt doen, zonder kunstgrepen of dingen gebruiken waarvoor ze niet zijn gemaakt. (Een tabel bijvoorbeeld). Tot Flexbox kwam.
Flexbox
Volledig: CSS Flexibele Box Layout Module is een nieuwe module die speciaal voor layout is gemaakt. Nou ja nieuw, er is wel bijna 10 jaar aan gewerkt, maar het resultaat is best goed!
In ieder geval is verticaal centreren heel simpel geworden: om dat te doen maak je van een element een flexbox container, en plaats je er iets in dat je centreert (horizontaal, en ook vertikaal!) met margin:auto;
Voorbeeld
Bekijk een voorbeeld inclusief code waar je zelf nog mee kunt spelen.