26 Maggio 2014 09:40:26 · [Centrare un Div]
Postato da
Salve, oggi volevo condividere una soluzione per centrare un div al centro della pagina sia verticalmente sia orizzontalmente. Esistono tante tecniche ma se non conosciamo l'altezza del div che facciamo? Per fortuna esiste una soluzione che si basa esclusivamente su css2 e quindi funziona anche sul vetusto Internet Explorer 8, non va su Internet Explorer 7... ma tanto il minimo per chi ha Windows XP è appunto la versione 8, chi possiede Windows 7 ha addirittura la versione 11 come me anche se io preferisco Mozilla Firefox. Il trucchetto è semplice e parte dal presupposto che conosciamo la larghezza del div altrimenti dovremmo scrivere del css usando come espediente max-width
per evitare che il div si allarghi spropositatamente. L'esempio che mostrerò tra qualche istante funziona alla perfezione su tutti i browser, quindi si può considerare una soluzione cross-browser. Se avete un div molto alto si potrebbe creare una situazione esteticamente non molto appetibile e cioè i bordi del vostro div potrebbero attaccarsi a quelli del browser, per impedirlo possiamo usare un trucchetto banalissimo aggiungendo al set di regole css applicate a .mio_div { margin-top: 50px; margin-bottom: 50px; }. Qui ho creato una demo. Ecco il codice:
html:
css:
html:
<html>
<body>
<div class="mio_div">Questo Div è al centro!</div>
</body>
</html>
css:
html
{
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table-cell;
vertical-align: middle;
}
.mio_div {
width: 400px;
margin: 0 auto;
}