CSS Centra orizzontalmente gli elementi su una pagina usando il margine


Esempio

Finché l'elemento è un blocco e ha un valore di larghezza impostato in modo esplicito , è possibile utilizzare i margini per centrare gli elementi di blocco su una pagina in senso orizzontale.

Aggiungiamo un valore di larghezza inferiore alla larghezza della finestra e la proprietà automatica del margine quindi distribuisce lo spazio rimanente a sinistra ea destra:

#myDiv {
 width:80%;
 margin:0 auto;
}

Nell'esempio sopra, utilizziamo la dichiarazione del margin stenografico per impostare prima 0 sui valori di margine superiore e inferiore (sebbene questo possa essere qualsiasi valore) e quindi usiamo auto per consentire al browser di allocare automaticamente lo spazio ai valori del margine sinistro e destro.

Nell'esempio sopra, l'elemento #myDiv è impostato su una larghezza dell'80% che lascia il rimanente del 20%. Il browser distribuisce questo valore ai lati rimanenti in modo tale:

(100% - 80%) / 2 = 10%