Il existe de nombreuses solutions sur le net pour compenser avec jQuery l'absence d'attribut CSS quand on n'utilise pas de tableau, mais toutes celles que j'ai trouvé on un bug dans certaines conditions : position: absolute risque de faire sortir le texte du cadre, margin-top fait descendre aussi le conteneur parent, problème avec le padding dans certaines configurations css, …

D'où pastel-vAlign, que j'ai testé dans de très nombreuses situations.

Le code du plugin jQuery

    $.fn.vAlign = function() {
        return this.each(function(i){
            $(this).children().wrapAll('<div class="pastel-vAlign" style="position:relative; margin: 0; padding: 0;"></div>');
            var jWrap = $(this).children('div.pastel-vAlign');
            var ph = $(this).innerHeight();
            var dh = jWrap.height();
            var mh = Math.round((ph - dh) / 2);
            jWrap.css('top', mh);
        });
    };

Utilisation

$('#element').vAlign();


#element doit avoir la hauteur de la zone dans laquelle on veut centrer l'élément enfant qui est dedans. L'élément enfant, lui, ne doit pas avoir de hauteur définie.


Donc le css doit être du type :

#element {height: 100px}

et pas "#element * {height: 100px}" par exemple

Demo

Voir la démo de pastel-vAlign