Posizionare un DIV al centro dello schermo

Quello che spiego di seguito è il modo migliore e più veloce di centrare orizzontalmente e verticalmente un qualsiasi elemento (nel mio caso un DIV) in una pagina web.

Supponiamo di avere il seguente codice da posizionare in centro:

<div class="div-centrato"></div>

Per centrare questo elemento orizzontalmente e verticalmente in modo che ridimensionando la finestra del browser il div resti al centro dovete applicargli questo stile:

.div-centrato{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-450px;
width:900px;
height:500px;
background: #3FA9F5;}

Sfruttando il posizionamento assoluto e la proprietà margin otteniamo un posizionamento dinamico dell’oggetto in relazione alla finestra del browser.

I margini (top e left) devono avere valore pari all’esatta metà delle dimensioni dell’elemento da centrare. Nel mio caso quindi l’elemento da 900×500 ha dei margini negativi di 450 e 250.

Il risultato può essere visualizzato qui