Pour un code html donné :

<div id="container">
    <div class="level1">
        <div class="level2">
            Texte centré en hauteur<br />
            sur plusieurs lignes
        </div>
     </div>
</div>

Appliquons un code css qui va permettre de considérer la div contenant le texte comme une cellule de tableau :

div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}

Le conteneur (#container) est considéré comme étant l’élément table (cette ligne n’est pas obligatoire comme nous l’avons vu dans un autre article des Intégristes qui explique le fonctionnement du display:table), la div qui a la classe level1 est considérée comme étant une cellule de tableau et se comportera de la même manière. Pour centrer le texte en hauteur on lui applique le couple propriété/valeur vertical-align:middle.

Un petit tour des navigateurs les plus communément utilisés, nous permet de nous rendre compte que cette solution ne convient pas à Internet Explorer (6 et 7). Nous allons nous servir de la div.level2 qui n’avait aucune utilité dans l’exemple précédent pour appliquer le code CSS suivant uniquement à Internet Explorer en utilisant les commentaires conditionnels HTML :

<!--[if IE]>
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;position:relative;background-color:red;}
.level1{position:absolute;top:50%;}
.level2{position:relative;top:-50%;}
</style>
<![endif]-->

Pour que le code css précédemment créé et qui fonctionne dans les navigateurs hors IE ne s’applique pas à IE, nous allons ajouter, les commentaires suivants :

<!--[if !IE]>-->

<!--<![endif]-->

Ce qui donne

<!--[if !IE]>-->
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}
</style>
<!--<![endif]-->

Vous allez certainement me poser ma question : pourquoi ne pas appliquer la deuxième solution à tous les navigateurs et pas uniqument à IE6 ?
Tout bonnement parce que la deuxième solution ne fonctionne que dans IE !

Plus d’exemples dans ce tutorial vraiment complet du blog In The Woods »