Ho già scritto in passato un paio di tutorial sul come allineare al centro orizzontale un DIV, e riuscire a farlo su tutti i browser, incluso quel truzzo di Internet Explorer (ma perché lo usate ancora?!? ). Viste le richieste che ho ricevuto ho deciso di scrivere questo breve tutorial sul come allineare sia orizzontalmente che verticalmente un DIV.

Quella che segue è una soluzione che ho attuato nel dover realizzare una pagina di login. Il DIV potrete dimensionarlo come vorrete, semplicemente agendo sui valori “width” e “height”:

div#box {
position: absolute;
width: 300px;
height: 250px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color:#FFFFCC;
}

Per farlo funzionare anche su Internet Explorer 6 o inferiore, vi consiglio di aggiungere anche questa condizione (che andrete a mettere sempre PRIMA della chiusura del tag HEAD):

<!--[if IE]>
<style type="text/css">
#box {
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
}
</style>
< ![endif]-->


Fate attenzione ad inserire nei valori “margin-left” e “margin-top” la metà delle dimensioni del DIV che avete dichiarato prima.

Ora andiamo a mettere il DIV nel BODY ed il gioco è fatto.


<div id="box">Questo DIV sta al centro assoluto... ;-)</div>


2 commenti per “Div allineati al centro assoluto della pagina”

1. Fulvio il 11 Maggio 2009 20:33

   sto provando a centrare, con questo metodo, ma se uno stringe in altezza il browser, sparisce il pezzo di pagina superiore, quindi non va bene, non c’è una soluzione?

2. Walter il 29 Novembre 2010 04:00

   Grazie davvero! erano ore che ci provavo. Con qualche piccola variazione l’ho utilizzato per quello che mi serviva..

Inserisci il tuo commento!