Con il seguente codice html / css è possibile centrare un div con attributo position impostato su fixed sia in orizzontale che vericale:
<html> <header> <style type="text/css"> div.fixed_center { border: red 1px solid; position: fixed; /* Centra verticalmente */ height: 200px; top: 50%; margin-top: -100px; /* Centra orizzontalmente */ width: 300px; left: 50%; margin-left: -150px; } </style> </header> <body> <div class=fixed_center> Questo div viene centrato sia in orizzontale che in verticale </div> </body> </html>
Gli elementi necessari sono sia la dimensione in pixel in altezza che in altezza e definirli con
height: 200px; width: 300px
Il trucco sta nell’impostare la posizione iniziale del div al 50% della finestra del browser con gli attributi css
top: 50%; left: 50%
e successivamente impostare un margine negativo dell’esatta metà dell’altezza e larghezza
margin-top: -100px; margin-left: 150px;
Vedi ESEMPIO
David Bigagli
