css

Element centreren

Centreren van elementen met CSS.

Hoe werkt dat dan?

Centreren van elementen met CSS is een eenvoudige taak. Door de align-content en text-align properties te gebruiken, kun je elementen horizontaal en verticaal centreren.

<div class="container">
  🫧
</div>

body {
  margin: 0;
  padding: 0;
}
.container {
  align-content: center; /* verticaal centreren */
  text-align: center; /* horizontaal centreren */
  
  --size: 300px;
  height: var(--size);
  width: var(--size);
  font-size: calc(var(--size) / 2.5);
  background-color: darkcyan;
  margin: 0 auto;
}