Box centrato in orizzontale e verticale
Box centrato in orizzontale e verticale
Extrowebsite

Nel presente articolo verrà affrontato il problema del posizionamento di un elemento - un div - al centro di una pagina web, sia in senso orizzontale che verticale. Quello che non conosciamo a priori, sono le dimensioni del contenitore del div stesso. Per semplificare, la pagina web è il nostro contenitore.

Se per centrare orizzontalmente un div è un’operazione molto semplice, che richiede solo una istruzione di codice CSS, senza la necessità di conoscere a priori le dimensioni esatte del box, per centrare verticalmente un oggetto nella pagina, si devono conoscere la larghezza e l'altezza.

Centrare un div orizzontalmente

Per centrare orizzontalmente un div, che nativamente è un elemento di blocco, abbiamo bisogno di una sola istruzione CSS: margin impostata su auto. Conoscendo la larghezza width del div, l'istruzione auto fa adattare l'elemento a destra e sinistra, in maniera equa.

Il codice

.horizontal {
width:200px;
height: 200px;
background: #f60;
margin: 0 auto;
}

L' Qualunque sia la largheza del viewport, il div sarà sempre al centro del suo contenitore.

Centrare un div verticalmente

Altra cosa, invece, quando ci si trova dinanzi al quesito su come centrare verticalmente ed orizzontalmente un div, non conoscendo la dimensione del suo contenitore. Però abbiamo bisogno di conoscere le dimensioni del div.

La posizione che assumerà il nostro elemento, verrà assegnata con position: absolute dato al div.
Poniamo il caso che volessimo posizionare un div di dimensioni 200px per 200px. Il codice CSS sarà:

.vertical{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
background:#f60;
}

Dopo aver assegnato position: absolute al div, si deve anche dichiarare quanto deve essere distante l'elemento dai lati. Impostiamo top e left al 50%, cioè la cioè la metà esatta del contenitore. Ma questo non basta per poterci dare il box centrato. In questo modo il div ha l'angolo superiore sinistro esattamente al centro della pagina. Dobbiamo far coincidere il centro del div con il centro della pagina ( o del suo contenitore ). Interveniamo con la proprietà margin. Il div deve essere "traslato" verso l'alto e verso sinistra (assegnando margini negativi) di un valore pari alla metà esatta delle sue dimensioni.

margin:-100px 0 0 -100px; 

Top e Left, infatti, hanno margini negativi. L'