Centrer un élément de hauteur inconnue

Il existe diverses méthodes pour centrer verticalement un élément dans un autre.
Mais la plus part d'entres elles nécessites de connaître la hauteur de l'élément à centrer.
La méthode suivante vous permettra de centrer des éléments de dimension inconnue dans un conteneur de dimension connu et tout cela avec uniquement du css.

Code

css

.conteneur {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 800px;
    height: 600px;
    background-color:#F00;	
}
.conteneur * {
    vertical-align: middle;
}
.conteneur span {
    display: inline-block;
    height: 100%;
}

html4strict

<div class="conteneur"><span></span><img src="dragon.jpg" alt="..."></div>

IE ne gère pas la propriété “table-cell”. Sont comportement sera donc émulé avec un span vide placé dans le conteneur.
Ce span aura comme propriété “inline-block” qui, elle, n'est pas comprise par Firefox (de cette façon le span n'influera pas sur le rendu dans firefox).
Note : “inline-block” sous IE ne fonctionne que sur des élément aillant comme style par défaut “inline” (comme les span).
Le “inline-block” couplé a une hauteur de 100% procurera le même rendu que si le “table-cell” était compris.