Le principe de la méthode
Tout d’abord nous avons deux divs que j’ai nommé « container » et « content ». Le div « content » sera centré dans le div « container ».
Pour centrer verticalement un div dans un autre, nous allons avoir besoin d’un div supplémentaire « temp » de hauteur de 1px et qui sera positionné à top : 50% du div container. ce « temp » contiendra donc le div « content » qui sera positionné à top:-50% de sa hauteur. Et comme par magie, il sera centré verticalement par rapport au div « container ».

Travaux Pratiques :
Le code XHTML correspondant est donc le suivant :

.
.
.
<div id="container">
  <div id="temp">
    <div id="content">
      Contenu du div à centrer
    </div>
  </div>
</div>
.
.
.

Comme vous le voyez, le div « container » contient le div « temp » qui contient le div « content ».

Passons maintenant au code CSS correspondant :


.
.
.
#container {
    height:500px;
    width:700px;
    position: relative;
}
#temp {
    position:absolute;
    height:1px;
    overflow: visible;
    top:50%
}
#content {
    position:absolute;
    height:200px;
    width:200px;
    top:-100px;
}

Vous avez surement remarqué le « overflow:visible » du div « temp » qui permet d’afficher ce qui dépasse puisque sa hauteur n’est que de 1px.

Résultat :

Voila ce petit tutorial est terminé, si vous avez des questions ou autre, n’hésitez pas.