Uitlijning van blokelementen in CSS

De eigenschap margin wordt niet alleen gebruikt voor het instellen van marges, maar ook voor het centreren van blokelementen. Hiervoor moeten de rechter- en linkermarge op de waarde auto worden gezet.

In het onderstaande voorbeeld komt het binnenste blok in het midden:

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}

Результат:

Houd er rekening mee dat op deze manier alleen blokelementen gecentreerd kunnen worden, alleen horizontaal en alleen als er een breedte voor is opgegeven.

Als we verschillende boven- en ondermarges nodig hebben voor margin, dan kunnen we het als volgt schrijven:

css.child {
  margin: 30px auto 10px auto;
}

Het kan ook herschreven worden met drie waarden: de eerste zet de bovenmarge, de derde de ondermarge, en de tweede geeft de waarde auto voor de rechter- en linkermarge:

css.child {
  margin: 30px auto 10px;
}