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
Pacman
Nostradamus
Magical Cat Adventure
Snake