Centrare orizzontalmente e verticalmente un div con il CSS

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.

Esempio.

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 top left

Esempio.

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 display middle display table-cell

Esempio.