Er zijn verschillende manieren om een element te centreren in CSS, afhankelijk van of je het horizontaal, verticaal of beide wilt centreren.
1. Horizontaal Centreren:
- Voor inline, inline-block, inline-table, table-cells and table-captions elementen:
```
.center {
text-align: center;
}
```
- Voor block-level elementen:
```
.center {
margin-left: auto;
margin-right: auto;
}
```
1. Verticaal Centreren:
- Voor single-line inline elementen:
```
.center {
line-height: [hoogte van de container];
}
```
- Voor meerdere lijnen en block level elementen:
```
.center {
display: flex;
justify-content: center;
align-items: center;
}
```
1. Horizontaal en Verticaal Centreren:
```
.center {
display: flex;
justify-content: center;
align-items: center;
}
```
Merk op dat de flexbox methode niet werkt in oudere browsers die flexbox niet ondersteunen. In dit geval wil je misschien een fallback oplossing voorzien.
Opgelet: De hoogte van de container moet worden gedefinieerd om de verticale centrering te laten werken. Als de hoogte van de container onbekend is, dan werken deze methoden niet.
