CSS: Centrare DIV verticalmente e orizzontalmente

Chi costruisce o modifica pagine web, con molta probabilità avrà già affrontato questo tipo di situazione, ovvero cercare di centrare un div, contenente un qualsiasi elemento, sia in orizzontale che in verticale utilizzando le proprietà del CSS.

Come centrare un div orizzontalmente

[code lang=”css”]
.classe_centra_div {
margin: 0 auto;
width: 400px;
height: 200px;
{[/code]

Dopo aver impostato una larghezza (width), specifichiamo il valore auto per entrambi i margini sinistro e destro. In questa maniera tutti gli elementi block-level (come div, paragrafi, H1, ecc.) risulteranno centrati; tuttavia se vogliamo applicarlo anche agli elementi inline (come immagini, link, ecc.) dobbiamo inserire un’ulteriore regola per la visualizzazione: display: block;.

Come centrare un div verticalmente

A questo punto siamo pronti per centrare il div anche in verticale: conoscendo in anticipo le dimensioni di quest’ultimo, lo andremo a posizionare in maniera assoluta relazionandolo così alla finestra del browser. Regolando un offset del 50% sia dall’alto che dalla sinistra, porteremo l’angolo superiore-sinistro del div, perfettamente al centro della nostra pagina.

Non resta altro che spostare il margine alto e quello sinistro, rispettivamente di un valore negativo pari alla metà esatta delle dimensioni di altezza e larghezza del div che avevamo precedentemente specificato. Questo accorgimento è necessario per far coincidere centrare della pagina, con il centro assoluto del div, anziché il vertice superiore-sinistro.

[code lang=”css”]
.classe_centra_div {
width: 400px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -200px;
{[/code]

E questo è tutto. Una volta specificato il codice CSS sarà necessario attribuire la classe appena creata, al div che vorremo centrare, così:

[code lang=”html”]
<div class="classe_centra_div>
<p>Questo paragrafo risulterà centrato</p>
</div>
[/code]

Non mi resta altro che augurarvi di… fare centro!