Verticaal centreren met CSS Flexbox

Een van de dingen die mij persoonlijk enorm kon irriteren is hoe moeilijk het was om iets verticaal te centreren, CSS Flexbox brengt hier verandering in. Als je ziet hoe makkelijk je dit met Flexbox kunt oplossen ga je je afvragen waarom het zo lang heeft geduurd totdat dit kon.

We maken eerst een HTML pagina:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Verticaal centreren met CSS Flexbox</title>
</head>
<body>
 
 <div class="wrapper">
 Deze tekst verticaal centreren met Flexbox
 </div>
</body>
</html>

Daarna voegen we deze CSS toe:

.wrapper {
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

Het resultaat

Resultaat verticaal centreren met CSS Flexbox

Het resultaat

Bekijk hier het echte resultaat: http://codepen.io/AriseMedia/pen/qOYGoy

Flexbox align-items

De CSS eigenschap align-items zorgt ervoor dat de inhoud van de Flexbox verticaal uitgelijnd wordt, door deze eigenschap kan je de volgende waardes gebruiken:

WaardeOmschrijvingResultaatVisueel
stretch (standaard)de items vullen de flexbox helemaal,van boven tot onderbekijk resultaatFlexbox Align Items Stretch
flex-startde items worden boven uitgelijndbekijk resultaatFlexbox align-items flex-start
flex-endde items worden onder uitgelijndbekijk resultaatFlexbox align-items flex-end
centerde items worden in het midden uitgelijndbekijk resultaatFlexbox align-items center
baselinede items worden op de baseline van de flexbox uitgelijndbekijk resultaat(zie resultaat)