Ci sono due soluzioni che conosco, entrambe cross-browser, ma con sostanziali differenze:

• La prima prevede l'uso dei posizionamenti assoluti ed è maggiormente indicata per centrare degli elementi che solitamente gestiscono il layout inetero della pagina. Ad esempio chi vuole centrare un elemento proprio nele centro della finestra del browser indipendentemente dalla risoluzione dello schermo;

• La seconda soluzione sfrutta la prima aggiungendo l'utilizzo dei posizionamenti relativi ed io la preferisco per centrare verticalmente (ma non solo verticalmente) dei piccoli blocchi che contengono informazioni dettagliate all'interno di un layout o di una pagina specifica. E' più laborioso da realizzare ma molto potente in termini di scalabilità.

Prima Soluzione:

Supponiamo che il nostro elemento da centrare sia un div (#mio_div) per praticità, ma è una tecnica che può essere applicata ad un qualunque elemento. I requistiti obbligator di questo elemento sono i seguenti:

#mio_div{display:block; height:XX; position:absolute; }

ovvero è richiesta la visualizzazione a blocco, il posizionamento assoluto ed una altezza impostata (sto studiando una eventuale tecnica che non preveda ciò, ma non ne sono ancora venuto a capo). Per agevolare l'esempio poniamo l'altezza del div al 40% della pagina. Aggiungiamo, poi, alla sequenza di proprietà del div una distanza dall'alto pari a 50% (ovvero metà altezza della finestra del browser) e per correttezza impostiamo un valore dal margine sinistro (zero in modo che sia largo 100%):

#mio_div{display:block; height:XX; position:absolute; top:50%; left:0;} 

Il nostro div risulterà ora troppo in basso. Per centrarlo sarà sufficiente impostare un margine negativo dall'alto pari alla metà dell'altezza del #mio_div. Sarò più chiaro: il nostro div è alto 40% e quindi il margine in alto verrà impostato a -20%:

#mio_div{ display:block; height:40%; position:absolute; top:50%; left:0; margin-top:-20%; }

Il gioco è fatto. Il div è allineato. Ovviamente, essendo posizionato in maniera assoluta qualunque contenuto in posizionamento statico (ovvero secondo il normale flusso dati della pagina) verrà visualizzato in maniera non particolarmente ordinata e gestibile senza accorgimenti adeguati. Pertanto consiglio vivamente di sfruttare questa soluzione integrata alla soluzione 2.

Seconda Soluzione

Questa soluzione, estensione della precedente, permette di centrare verticalmente un elemento figlio all'interno di un elemento padre. Il tutto si basa sull'utilizzo congiunti di posizionamenti relativi ed assoluti.

Prendiamo come rifermento sempre due elementi div, ricordando che la soluzione può essere applicata con la quasi totalità delle coppie di elementi html. Li chiameremo div_ext e div_int, dove il secondo sarà l'elemento che centreremo verticalmente all'interno del primo.

Partiamo impostando il primo elemento con due proprietà indispensabili:

#div_ext{ display:block; position:relative; }

ed aggiungiamo due proprietà con le quali capiterà di aver a che fare in casi pratici di utilizzo dei CSS:

#div_ext{ display:block; position:relative; height:40%; width:100%;}

semplice dimensionamento. A questo punto si può osservare come sia stata impostata la posizione relativa a questo elemento. Questa impostazione permette, unita al seguente codice

#div_int{ display:block; position:absolute; height:40px; width:100%; }

di collocare il div_int in maniera assoluta prendendo come riferimenti assoluti le estremità del div_ext. Ovvero, impostando le proprietà left, top, bottom, right tipiche del posizionamento assoluto l'elemento interno non uscirà mai dal suo elemento contenitore (a parte per sovradimensionamenti). Per la precisione, con le seguenti istruzioni

#div_int{ display:block; position:absolute; height:40px; width:100%; top:50%; margin-top:-20px;}

otterremo l'allineamento verticale del blocco div_int all'interno del blocco div_ext. Si ossrervi come le 3 proprietà aggiunte altro non sono se non le stesse usate per centrare il blocco all'interno di una pagina. La differenza sostanziale sta nel fatto che, pur inserendo codice html posizionato staticamente al di fuori del div_ext, il posizionamento assoluto del div_int non comporta sovrapposizioni o risultati poco ordinati dal punto di vista grafico. I limiti stanno nelle dimensioni del div_int pressochè obbligatorie per raggiungere l'obiettivo dell'allineamento. Inserendo opportuni colori di sfondo o dei bordi, si potrà verificare la correttezza di queste soluzioni. Pertanto ho preparato due semplici esempi:

esempio soluzione 1;

esempio soluzione 2;

Sperando di potervi aiutare, Paolo vi saluta.

Qui i link per l'allineamento verticale con css lezione 1 e allineamento verticale con css lezione 2.