Allineamento di elementi blocco in CSS

La proprietà margin non viene utilizzata solo per impostare i margini, ma anche per centrare gli elementi blocco. Per fare ciò, i margini destro e sinistro devono essere impostati sul valore auto.

Nell'esempio seguente, il blocco interno si posizionerà al centro:

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;
}

Результат:

Tieni presente che in questo modo è possibile centrare solo elementi blocco, solo orizzontalmente e solo se hanno una larghezza definita.

Se abbiamo bisogno di margini superiore e inferiore diversi per margin, possiamo scrivere così:

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

Può essere riscritto anche con tre valori: il primo imposta il margine superiore, il terzo quello inferiore, e il secondo imposta il valore auto per i margini destro e sinistro:

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