Centrare un <div> sia in orizzontale che in verticale: guida pratica
Vi è mai capitato di voler centrare un contenitore sia in orizzontale che in verticale nella vostra pagina web? A me è successo per un lavoro che stavo portando avanti per un cliente. La soluzione è molto semplice: utilizziamo alcuni accorgimenti nel nostro file CSS.
Il codice
Per ottenere l’effetto desiderato innanzi tutto dobbiamo scegliere larghezza e altezza del nostro contenitore in pixel, nel mio caso prenderò come larghezza i canonici 980px e come altezza 500px. Vediamo come dobbiamo modificare il nostro CSS:
-
#container{
-
width: 980px;
-
height: 500px;
-
position: absolute;
-
/* background-color: #009900; o un'immagine di sfondo se diversi dal body */
-
overflow: hidden;
-
top: 50%;
-
left: 50%;
-
margin-left: –490px;/* la metà della larghezza del nostro contenitore ma NEGATIVA */
-
margin-top: –250px;/* la metà dell’altezza del nostro contenitore ma NEGATIVA */
-
}
Il gioco è fatto, provate anche voi, personalizzandolo come preferite.
