Avevamo visto in precedenza come centrare un elemento con dimesioni fisse verticalmente e orizzontalmente e prima ancora avevamo centrato orizzontalmente un div nella pagina.

Vediamo stavolta come si può centrare verticalmente un elemento di cui non si conosce l’altezza. La cosa è realizzabile solo se l’elemento genitore (che conterrà il box da centrare) avrà un’altezza fissa; inoltre dovrà essere dichiarato come “tabellare“.

Vediamo il codice Css così chiariamo meglio:

#padre {
  height:300px;  /* elemento contenitore con altezza fissa */
  display:table; /* elemento contenitore visualizzato come tabella */
}
#figlio_centrato {
  display:table-cell;    /* elemento visualizzato come cella di tabella*/
  vertical-align:middle; /* centro verticalmente */
}

A questo punto basta applicare il codice Css qui sopra a una struttura (x)html normalissima. Ci bastano un paio di Div.

<div id="padre”>
  <div id="figlio_centrato">
    <p>Un po' di contenuto</p>
  </div>
</div>

Nota: vertical-align ha validità quando si applica a una cella di una tabella (col display: table-cell); questo potrebbe servire specialmente quando il contenuto del sito è dinamico (dati reperiti da un database)

Attenzione! Questo metodo (un classico!!) non funziona su IE6 e IE7.

Come fare ad adattare il tutto?

Si può usare a nostro vantaggio un errore di interpretazione dei Css “top” assegnandogli un valore negativo in percentuale, dato che questo non dovrebbe essere preso in considerazione dalle specifiche.

Vediamolo in dettaglio:

#padre {
  height:300px; /* vedi sopra */
  position:relative; /* voglio poter posizionare in modo assoluto ciò che starà al suo interno */
}
#sotto_padre{
  position:absolute; /* sotto elemento posizionato in modo assoluto in rapporto al div padre */
  top:50%; /* il bordo superiore sarà al 50% dell’altezza disponibile */
}
#figlio_centrato {
  position:relative; /* elemento da centrare in rapporto al div sotto_padre */
  top:-50%; /* bordo superiore va ad alzarsi del 50% dell’altezza*/
}

Vediamolo col nuovo codice (x)html…

<div id="padre">
  <div id="sotto_padre">
    <div id="figlio_centrato">
      <p>Un po' di contenuto</p>
    </div>
  </div>
</div>

Quindi adesso dovrebbe andare bene sui vari browser.

Con un po’ di fantasia e a seconda del tipo di struttura che stiamo creando possiamo definire l’altezza del div “padre” al 100% e ridefinire anche Body e Html al 100%. In questo modo otterremo un risultato a pagina piena.

Bye…