Centrare in verticale con CSS

Capita di dovere centrare verticalmente alcuni elementi. La cosa, se presa dal verso sbagliato (tipo, pasticciando con margin e padding) può essere piuttosto irritante, in realtà, ho scoperto, è quasi banale.
Se volete centrare un testo all’interno di un elemento (può essere il caso di un bottone, di elementi di una lista, ecc.) basta usare la proprietà line-height. Se l’elemento esterno (mettiamo, il bottone) è alto 30px, basta usare, per il testo line-height: 30px.


(Di fatto la proprietà line-height sembra essere la versione moderna della pratica, che ho letto descritta da Fred Smeijers in Counterpunch, di fondere un carattere di un certo corpo sull’altezza di un corpo maggiore).

Se poi uno cerca di centrare verticalmente un intero blocco nella pagina la cosa diventa un poco più complicata.
Avevo pensato di usare la stessa line-height per centrare un div trattato come se fosse un elemento inline. Ovviamente la cosa non funziona perché se uno prova a usare le percenntuali per line-height, la misura di riferimento è relativa al corpo del carattere e non all’altezza della pagina.
Ho fatto delle ricerche: una soluzione consiste nel piazzare un elemento, alto il 50% della pagina che funziona come distanziatore. A questo elemento si applica un margine inferiore negativo pari alla metà dell’altezza dell’oggetto che va centrato.
Dopo l’elemento distanziatore si piazza il contenitore da centrare, et voilà.

Non so perché ma questa soluzione non mi soddisfa molto, preferirei infatti avere i due elementi (distanziatore e contenitore vero e proprio) annidati l’uno nell’altro.
La soluzione che ho trovato sarebbe questa:

<div id="distanziatore">
<div id="centrato">
</div>
</div>

e il css

#distanziatore{
position:absolute;
height:50%;
top:50%;
}

#centrato{
position:relative;
height:200px;
width:200px;
margin-top:-100px;
background-color:#000;
}

Bisogna usare il posizionamento assoluto per una ragione un poco contorta. La cosa più ovvia sarebbe usare un margine superiore del 50%, solo che se applichiamo le percentuali ai margini (anche a quelli superiore e inferiore) non sono calcolate sull’altezza dell’elemento ‘genitore’(ma, sembra, sulla sua larghezza).
In più, volendo spostare in alto il box da centrare con il margine superiore negativo, explorer decide senz’altro di tagliarlo. La soluzione è quella di usare la posizione relativa.

daniele