Nel presente articolo vedremo come posizionare al centro di una pagina web, o di un altro elemento padre, un elemento di blocco, che ormai conosciamo con il nome di div.
Il suddetto div verrà centrato in orizzontale, in verticale, contemporaneamente in orizzontale e verticale, o in una pagina web, oppure all'interno di un altro contenitore.
Se volessimo centrare il div in una pagina web, non conosciamo a priori le dimensioni della stessa. Soprattutto per il motivo che le dimensioni del viewport di un monitor desktop differiscono dalle dimensioni di un tablet, di uno smartphone ecc.
Centrare in orizzontale un div è un'operazione molto semplice, che richiede solo una istruzione di codice CSS, senza la necessità di conoscere le dimensioni esatte dell'elemento padre.
Per centrare in verticale un div, invece, il metodo è differente, a seconda della tecnica che si vuole utilizzare.
Vedremo diversi modi di posizionare un box al centro di una pagina.
Centrare un div in orizzontale con margin:auto
Per centrare un div, che nativamente è un elemento di blocco, in orizzontale, 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;
}
Su qualsiasi dispositivo, con qualsiasi dimensione di viewport, il div sarà sempre centrato in orizzontale nel suo contenitore.
Cominciamo a vedere il primo risultato di quanto appena scritto.
Si noti che ho inscritto il div da centrare in un rettangolo puntinato. Questo elemento potrebbe benissimo essere, appunto, un altro elemento di blocco oppure una pagina web completamente vuota. Il risultato non cambia.
Centrare un div in orizzontale con display:flex
Un altro modo per centrare un div in orizzontale è quello, ormai diffusissimo, di CSS Flexbox. Anche in questo caso non conosciamo le dimensioni del contenitore. Dobbiamo rendere flex(ible), l'elemento padre. Vediamo come.
.content2{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-justify-content:center;
justify-content:center;
}
Questa sola dichiarazione è sufficiente per centrare un div in orizzontale, qualsiasi dimensione abbia il suo elemento padre. Ovviamente, se nella pagina non esiste nessun elemento contenitore, il "padre" diventa il body ed è lo stesso body che deve essere reso flex(ible). Il risultato è identico a quello visto prima.
Quale metodo preferire? Qual è il migliore? Non esiste risposta assoluta a questa domanda. Quello che più ci "piace", che più ci convince. Con entrambi otteniamo lo stesso risultato. Sono due tecniche entrambe valide.
Centrare un div in verticale con i CSS
Veniamo adesso al nodo cruciale del tema: come fare per centrare un div in verticale, conoscendo le dimensioni del box da centrare ma non quelle del proprio contenitore.
Personalmente adotto tre tecniche, a seconda dei casi che mi si presentano.
Centrare un div in verticale con padding
Il modo più semplice per centrare un div in un contenitore è quello di assegnare un padding, superiore ed inferiore, all'elemento padre.
.content{
padding:30px 0;
border:1px dotted #f00;
width:98%;
margin:0 auto 40px;
}
.vertical{
width:200px;
height:200px;
background:tan;
border:1px solid blue;
margin:0 auto;
}
Andando ad inscrivere il div.vertical in div.content, abbiamo esattamente il primo centrato orizzontalmente e verticalmente nel secondo. Si veda l'esempio.
Da notare che, manco a farlo apposta, con l'esempio appena visto, abbiamo ottenuto una centratura sia in verticale che in orizzontale.
Centrare div in orizzontale e verticale con position:absolute
In questo caso, non conoscendo le dimensioni del contenitore, dobbiamo ricorrere al posizionamento assoluto. Poniamo il caso che si voglia centrare in orizzontale e verticale un div di dimensioni 200px per 200px. Il codice CSS sarà:
.vertical{
width:200px;
height:200px;
background:tan;
border:1px solid blue;
position: absolute;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
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 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, per un valore pari alla metà esatta delle sue dimensioni.
margin:-100px 0 0 -100px;
Top e Left, infatti, hanno margini negativi. L'esempio ci mostra la centratura verticale ed orizzontale.
Centrare div in orizzontale e verticale con CSS Flexbox
Un'altra tecnica per centrare un div, in orizzontale e verticale, in una pagina, è quella che abbiamo visto più su: ricorrere a CSS Flexbox.
Anche in questo caso le dimensioni del contenitore non sono note e CSS Flexbox ci viene in aiuto disponendo esattamente al centro un determinato elemento.
Il body sarà il nostro contenitore ed è ad esso che si deve attribuire la proprietà flex. Il codice CSS:
body{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-justify-content:center;
justify-content:center;
-webkit-align-items:center;
align-items:center;
}
.vertical{
width:200px;
height:200px;
background:tan;
border:1px solid blue;
}
Non serve altro per raggiungere il nostro scopo, come si può vedere nell'esempio.