Come avere un layout di pagina centrato

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:

  1. #container{
  2. width: 980px;
  3. height: 500px;
  4. position: absolute;
  5. /* background-color: #009900; o un'immagine di sfondo se diversi dal body */
  6. overflow: hidden;
  7. top: 50%;
  8. left: 50%;
  9. margin-left:490px;/* la metà della larghezza del nostro contenitore ma NEGATIVA */
  10. margin-top:250px;/* la metà dell’altezza del nostro contenitore ma NEGATIVA */
  11. }

Il gioco è fatto, provate anche voi, personalizzandolo come preferite.

Post Correlati

Leave a comment

venti − 19 =