Er zijn een paar manieren om een item verticaal uit te lijnen met CSS. Twee populaire manieren zijn met behulp van Flexbox en CSS Grid, die beide gedetailleerde controle over uitlijning bieden.
Met Flexbox:
```
.container {
display: flex;
justify-content: center; /* horizontaal uitlijnen */
align-items: center; /* Verticaal uitlijnen */
height: 100vh; /* Maak de container-vulweergavehoogte om verticale uitlijning mogelijk te maken */
}
```
Met CSS Grid:
```
.container {
display: grid;
place-items: center; /* Dit zorgt voor zowel horizontale als verticale uitlijning */
height: 100vh; /* Maak de container-vulweergavehoogte om verticale uitlijning mogelijk te maken */
}
```
Opmerking: “vh” staat voor “viewport height”, wat gelijk is aan 1% van de hoogte van het viewport. Dus, “100vh” is gelijk aan 100% van de hoogte van het viewport.
Als het gaat om het centreren van tekst binnen een div of een ander blokniveau-element, kunt u de “line-height” -eigenschap gebruiken, die gelijk moet zijn aan de hoogte van de container.
```
.container {
height: 100px;
line-height: 100px; /* Dit zorgt voor verticale uitlijning van tekst */
text-align: center; /* Dit zorgt voor horizontale uitlijning van tekst */
}
```
