3 soluzioni per risolvere definitivamente il problema della centratura

Centrare verticalmente un elemento, solitamente il contenitore principale della pagina, è un problema con il quale tutti i webdesigner, più o meno esperti, si trovano faccia a faccia. La soluzione definitiva non esiste, ognuna delle 3 che prendiamo in esempio però fa il suo dovere. Saranno le nostre esigenze ed il nostro target a doverci indirizzare verso quella migliore di volta in volta.

1. Il metodo del posizionamento assoluto

Questo metodo utilizza un div posizionato in modo assoluto, settando la proprietà CSS top al 50%, ed un margin-top uguale alla metà negativa dell’altezza del contenuto stesso. Questo ovviamente richiede la dichiarazioni di un’altezza fissa dell’oggetto stesso. Settando overflow:auto facciamo in modo che in caso di contenuto più esteso compaia all’interno una scrollbar per scorrere i contenuti. Se quella di default non andasse bene potremmo sempre ricorrere a jScrollPane!

<div id="container">
	Qui andrà il contenuto		
</div>
#container {
    position:absolute;
    top:50%;
    height:240px;
    margin-top:-120px; /* meno la metà dell'altezza */
}

Pro:

  • Funziona in tutti i browser
  • Non richiede annidamenti
  • Non richiede codici o plugin js esterni
  • Facilmente combinabile per centrare contemporaneamente verticalmente ed orizzontalmente

Contro:

  • Se non c’è sufficiente spazio visivo in altezza nel browser il contenitore viene spostato in alto e nascosto alla vista

Situazione ideale d’uso

E’ la soluzione più pulita, da usare quando si è certi che la stragrande maggioranza del nostro target disporrà di un monitor con una risoluzione sufficientemente alta per visualizzare sempre tutta la finestra e quindi il container per intero.

2. Il metodo dei contenitori annidati e la proprietà table-cell

Con questo metodo si inserisce un div dentro ad un altro. Il contenitore più esterno dovrà avere un’altezza fissa dichiarata e la proprietà table-cell per poter permettere di usare la centratura verticale.

<div id="container">
	<div class="wrap1">
		Qui andrà il contenuto	
	</div>
</div>
#container {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 400px;
}

Pro:

  • Funziona in tutti i browser
  • Permette di centrare verticalmente dei testi
  • Non richiede codici o plugin js esterni

Contro:

  • Non può essere usato per centrare verticalmente rispetto a tutta la pagina
  • Richiede l’utilizzo di 2 contenitori

Situazione ideale d’uso

E’ la soluzione più adatta quando si vogliono centrare verticalmente dei testi dentro a dei box di altezza fissa. Ricalca fedelmente quello che nelle tabelle si otteneva scrivendo “valign=middle”.

3. Centratura orizzontale e verticale perfetta con jQuery

Questo metodo utilizza l’ottimo plugin “jQuery CentreInWindow” grazie al quale non dovremo far altro che, una volta incluso il plugin, associare lo script al nostro contenitore.

$(document).ready(function() {
   $('#container').centreInWindow();
}

Pro:

  • Funziona in tutti i browser
  • Permette di centrare orizzontalmente e verticalmente
  • Utilizza un solo contenitore
  • Il contenitore viene sempre reso visibile senza tagli anche su schermi piccoli

Contro:

  • Fa uso di javascript, in caso sia disabilitato quindi l’impaginazione salterà.

Situazione ideale d’uso

E’ il metodo più rapido e completo da implementare quando si ha la necessità di centrare un contenitore verticalmente ed orizzontalmente rispetto alla pagina. Da utilizzare quando non si eseguono troppi script e si è sicuri che il nostro target vedrà sicuramente il risultato. In alternativa è possibile porre una condizione affinchè anche in mancanza di javascript si possa ripiegare sul metodo numero 1.