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:

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

.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ì:

.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:

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

Ricrea la pagina seguendo l'esempio, in modo che i blocchi verdi siano posizionati al centro del loro genitore: