Comment centrer un bloc verticalement en CSS

Dernièrement, lors de la création d’un site web que l’on m’a demandé, j’ai été confronté à un problème. Pendant la réalisation du design, je devais centrer une div à l’intérieur d’une autre div.
Problème, en CSS rien n’a été prévue pour ça. Seul les div se comportant comme des cellules de tableau grâce à display:table-cell centre leurs contenus à la verticale.

Cela aurait donc pu être une solution, mais elle entrainait d’autres complications. Dans mon cas, je devais aligner les div conteneurs l’un à la suite de l’autre et les faire passer à la ligne tous les quatre div alignés. Malheureusement, les cellules de tableau s’alignent à l’infinie en prolongeant la largeur de la page indéfiniment. On était donc loin du résultat espéré.

J’ai dû prendre le temps de fouiller dans la multitude d’informations du web pour enfin trouver un site qui ne proposait pas la solution du display:table-cell. La solution étant simple, et assez « propre » je vous la propose aujourd’hui comme une petite astuce bonne à connaitre.

La solution : line-height / height

Tout d’abord, voyons nos div :

<div id="conteneur"> 
    <div id="contenu"> 
        <p>[...]</p> 
    </div> 
</div>

Voilà, on a nos div. On leur applique un style de base :

*{ 
    padding: 0px; 
    margin: 0px; 
} 

div#conteneur{ 
    background-color: green; /* de la couleur pour mieux reperer les blocs*/ 
    width: 250px; 
    height:250px; 
    display: inline-block; 
    text-align:center; /* on centre horizontalement */ 
} 

div#contenu { 
    background-color: blue; /* de la couleur pour mieux reperer les blocs*/ 
    width:150px; 
    padding: 15px; 
    vertical-align:middle; 
    display:inline-block; 
}

Enfin, on centre verticalement le div à l’intérieur. Ce qu’il faut faire c’est de donner la même valeur au line-height du conteneur et à son height, et ensuite rétablir le line-height du contenu. Ce qui donne :

*{ 
    padding: 0px; 
    margin: 0px; 
} 

div#conteneur{ 
    background-color: 
    green; /* de la couleur pour mieux reperer les blocs*/ 
    width: 250px; 
    height:250px; 
    display: inline-block; 
    line-height:250px; /* même valeur que la hauteur */ 
    text-align:center; /* on centre horizontalement */ 
} 

div#contenu { 
    background-color: blue; /* de la couleur pour mieux reperer les blocs*/ 
    width:150px; 
    padding: 15px; 
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2; /* on remet le line-height par défaut */ 
}

Ce qui devrait vous donner un div centré à la verticale comme ceci :

J’espère que cet article vous aura quand même un peu aidé. Moi, je trouve cette astuce vraiment pratique. Donnez votre avis. Vous utilisez vous aussi cette technique  ? Vous en connaissez une mieux  ? Partagez !

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.