A volte, le cose che possono sembrare naturali e semplici, con i CSS diventa complicato realizzarle; è il caso del centrare dei div all’interno di un contenitore.
Mentre centrare orizzontalmente un div è un’operazione che richiede una sola istruzione e non necessita di sapere a priori le dimensioni esatte del box, per centrare anche verticalmente un oggetto nella pagina, abbiamo bisogno di conoscere la sua larghezza e la sua altezza.
Centrare orizzontalmente un div
Per centrare orizzontalmente un div abbiamo bisogno della sola istruzione margin impostata su auto sui valori di destra e sinistra.
Il codice:
div#orizzontale {
width: 200px;
height: 200px;
background: #25FF00;
margin: 0 auto;
}Possiamo impostare un valore qualsiasi per il margine superiore e/o inferiore, l'importante è assegnare auto ai margini sinistro e destro.
Centrare verticalmente un div
Il discorso cambia quando si ha la necessità di centrare anche verticalmente il box. In questo caso, come detto in precedenza, abbiamo bisogno di conoscere le dimensioni del div mentre, fortunatamente, non è importante sapere le dimensioni del div contenitore.
Per centrare il div utilizzeremo il posizionamento assoluto impostando i valori dei margini superiore e inferiore in base alle effettive dimensioni del div.
Il codice:
div#verticale {
width: 200px;
height: 200px;
background: #25FF00;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}Dopo aver assegnato position: absolute al div, impostiamo come valore di top e left 50%, cioè la metà esatta della pagina. In questo modo però il div ha il bordo sinistro superiore esattamente al centro della pagina; per far coincidere il centro del div con il centro della pagina (o del contenitore in generale) bisogna assegnare ai margini superiore e sinistro un valore negativo corrispondente alla metà esatta della dimensione del div (in questo caso 100px è la metà di 200px).
Nel caso non si conosca a priori la dimensione del div, è comunque possibile centrare il div anche se con una tecnica più "sporca". In questo caso si ha la necessità di conoscere la dimensione in altezza del div contenitore e dobbiamo avere la possibilità di impostare la proprietà display al valore table.
Il codice HTML:
<div id="container">
<div id="content">
<p>Lorem ipsum</p>
</div>
</div>Il codice CSS:
div#container {
border: 1px solid #FF0000;
height: 200px;
display: table;
}
div#content {
background: #25FF00;
display:table-cell;
vertical-align:middle;
}Per prima cosa impostiamo un valore in altezza al div contenitore e impostiamo su table la proprietà display. A questo punto assegniamo al box che vogliamo centrare un allineamento verticale con valore middle e un display con valore table-cell.