> ## Content Index
> Fetch the complete content index at: https://mindsers.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Comment centrer un bloc verticalement en CSS
- URL: https://mindsers.blog/fr/post/css3-centrer-un-bloc-verticalement/
- Published: 2012-11-05T17:50:27.000Z
- Updated: 2023-05-12T16:14:24.000Z
- Author: Nathanaël Cherrier
- Tags: css, coding-tech, design, #lang-fr

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

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

```

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

```css
*{ 
    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 :

```css
*{ 
    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](https://mindsers.blog/content/images/2016/01/article5.png)

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 !