/ css

[CSS3] Centrer un bloc verticalement

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

Cela aurait donc pu être une solution mais elle entrainait d’autre complication. Dans mon cas, je devais aligner les div conteneurs l’un à la suite de l’autre et les faire passer à la ligne tout 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 du prendre le temps de fouiller dans la multitude d’information 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 à 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; 
}

Et 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:

div centré à la verticale

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!