Porre un box al centro della pagina è molto semplice, basta sapere come fare. In questo articolo vedremo un esempio di come porre al centro della pagina, sia in verticale sia in orizzontale, un box largo 350px e alto 200px.
Per lavorare su tutta l'area della pagina, è necessario annullare i margini della pagina e impostare a 100% l'altezza del tag BODY
e dunque anche del tag HTML
:
body,html { height:100%;margin:0 }
E' necessario impostare height:100%
anche per il tag HTML
poiché la regola height:100%
ha come riferimento (100% rispetto a cosa?) l'altezza del tag parent (quello che contiene il tag a cui ci si riferisce) che è appunto il tag HTML
.
Il box che verrà centrato sarà identificato dal selettore #box
.
Innanzitutto definiamo la dimensione del box:
#box {
width:350px; height:200px;
[...]
}
La dimensione è stata definita in pixel, ma poteva tranquillamente essere definita in unità percentuali.
Quando si stabilisce l'altezza di un elemento con la proprietà height
, è bene non inserire contenuti che forzino l'altezza stabilita, poiché si perderebbe l'allineamento veriticale e poiché i diversi browser non si comportano tutti nello stesso modo e risultati potrebbero non essere gradevoli. Del resto, se si imposta l'altezza di un box significa che si conosce l'altezza occupata dai contenuti.
Impostate le dimensioni del box, è possibile centrarlo in due soli passi.
Il primo passo consiste nel posizionare il box in modo tale che l'angolo superiore sinistro si trovi al centro della pagina. Ciò e molto semplice e può essere realizzato attraverso il posizionamento assoluto:
#box {
[...]
position:absolute;top:50%;left:50%;
[...]
}
A questo punto il box è posizionato in maniera tale da avere l'angolo superiore sinistro esattamente al centro della pagina. Se adesso si impostano il margine superiore e il margine sinistro su valori negativi, il box si sposterà verso l'alto e verso sinistra. Se il margine superiore è pari a metà dell'altezza del box (-100px) e il margine sinistro è pari a meta della larghezza del box (-175px), essendo tali valori relative all'angolo superiore sinistro, il box sarà al centro della pagina:
#box {
[...]
margin:-100px 0 0 -175px;
}
Il metodo funziona anche se altezza e/o larghezza sono fissati in unità percentuali.
Il codice CSS definitivo è dunque il seguente:
body,html { height:100%;margin:0 }
#box {
width:350px; height:200px;
position:absolute;top:50%;left:50%;
margin:-100px 0 0 -175px;
}
Questo metodo è stato testato con IE5.5 e IE6, Mozilla, Opera 6.0 e Opera 7 (Beta). Purtroppo l'allineamento verticale non funziona con Konqueror 3 e il box finisce al di fuori dello schermo. Qualora riuscissi a trovare una soluzione la segnalerò in questo articolo, fino ad allora sarebbe bene usare tecniche di sniffing per nascondere il codice a tale browser.