Allineamento verticale nei CSS?

Question

Quindi so tutto sui problemi con vertical-align: middle; e sui diversi metodi che le persone hanno usato per allineare verticalmente gli elementi nei CSS. Ma non ne ho trovato uno che funzioni per quello di cui ho bisogno per farlo funzionare.

Fondamentalmente la mia pagina ne ha solo una <div>, che voglio posizionare al centro della pagina, sia in orizzontale che in verticale. Ovviamente la parte orizzontale è facile, ma mi sto appendendo sulla parte verticale. Il mio problema è che l'altezza di <=> è sconosciuta; il contenuto cambia, quindi non posso specificare un'altezza per esso.

Qualcuno ha qualche consiglio per me? Sono disposto a utilizzare JavaScript se necessario. Grazie!

Answer 1

Per farla breve, hai bisogno di due div per ottenere il centraggio verticale solo CSS.

Con Javascript, puoi farlo con un singolo div , sebbene .

Answer 2

Come hai detto che non ti dispiace usare JS, eccolo qui (in genere non ho mai fallback su una soluzione JS, ma se sei forte con esso, allora lo sono anch'io)

Se il tuo CSS è

#element {
    position: absolute;
    top: 50%;
}

Quindi potresti usare il mio amico jQuery

$(document).ready(function() {
    var height = $('#element').height();
    $('#element').css({marginTop: '-' + (height / 2) + 'px'})

{);

Nota, questo non è testato, ma dovrebbe essere un inizio. Eventualmente l'altezza / 2 funzionerà come previsto, in caso contrario, prova a utilizzare parseInt();