Può risultare utile centrare il layout di una pagina, di un’immagine o di un qualsiasi altro elemento indipendentemente dalla risoluzione usata o dalla grandezza della finestra del browser.

Per questo esempio useremo un elemento div come container del nostro layout, al quale applicheremo una classe che per comodità chiameremo centrato.

Vediamo subito un sorgente HTML completo dell’esempio:

    <!-- Qui l'header della pagina HTML -->

 

Ora vedremo come scrivere il file style.css per ottenere la centratura del layout:

div#container {
  width:780px; // Diamo una dimensione fissa al container
}
.centrato {
  // Impostiamo il margine superiore ed inferiore a 0
  // e in auto i margini laterali
  margin:0 auto;
}

E il gioco è fatto! Semplice, no?

Qualcuno potrebbe invece chiedersi perché siano state usate due regole differenti e non sia stata creata un’unica regola che contenesse tutte le informazioni: domanda più che legittima.
Quando scriviamo il CSS per la formattazione dei nostri layout, dobbiamo sempre cercare di rendere il file leggero, riutilizzando (là dove è possibile) le regole già inserite.
La regola div#container è riferita all’intero corpo del layout (infatti difficilmente altri elementi saranno grandi quanto il layout stesso), mentre la classe .centrato può essere utilizzata non solo per il container ma, ad esempio, per centrare un’immagine o un div interno alla pagina.

E’ vero che la regola dentro la classe .centrato poteva essere scritta all’interno di div#container ma se dovessimo centrare altri elementi, ci toccherebbe riscriverla altre volte rendendo così il file.css molto più pesante e complesso da leggere.