Comment centrer verticalement avec CSS ?

Centrer verticalement est une tâche souvent redoutée (et oubliée 🥲) par les développeurs. Souvent vécu comme une situation frustrante dans laquelle l'incapacité de trouver une solution simple s'est soldée par un échec ou une mise au placard !

Heureusement, avec le temps de nouvelles techniques pour centrer verticalement ont vu le jour.

Aujourd'hui, elles sont au nombre de cinq :

1. avec flexbox - qui est une des deux techniques les plus récentes ;
2. avec les grilles - qui est donc l'autre technique la plus récente ;
3. avec la propriété line-height - qui est assez vieille ;
4. avec la position absolue - que seuls les anciens connaissent ;
5. et avec les tableaux - dont quelques rares développeurs connaissent les secrets.

Rentrons dans le détail pour chacune de ces méthodes ! Accrochez-vous : on est parti ! 😉

Comment centrer verticalement avec Flexbox ?

Avec la propriété items-center

Pour centrer verticalement avec Flexbox, il suffit de suivre ces deux étapes :

1. Créer un élément parent (ici le conteneur) qui possède la propriété display: flex pour activer flexbox ;
2. Ajouter la propriété align-items: center pour centrer les éléments enfants verticalement.

Si vous ne savez pas ce qu'est Flexbox, voici un petit guide complet pour vous aider à tout connaître sur le sujet.

Partant de ce principe, voici un exemple :

.conteneur {
  display: flex; /* On initialise flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  height: 400px; /* Hauteur du conteneur */
  border: 1px solid black; /* On ajoute une bordure noire /*
}

Et le code HTML :

<div class="conteneur">
  <p>Ce texte est centré verticalement avec Flexbox</p>
</div>

Facile ! Vous pouvez aussi tester ce code par vous-même :

Dans cet exemple, le texte est centré horizontalement et verticalement au milieu du conteneur de 400px de hauteur.

Avec la propriété align-self

Il est également possible de centrer uniquement un élément spécifique à l'intérieur d'un parent qui utilise flexbox.

Pour ce faire, il faut utiliser la proprité align-self directement sur l'élément à centrer verticalement :

.conteneur {
  display: flex;
  height: 400px;
}

.element-centre {
  align-self: center;
}

Dans cet exemple, seul l'élément avec la classe .element-centre sera centré verticalement, tandis que les autres éléments du conteneur ne seront pas affectés.

Comment centrer verticalement avec les grilles CSS ?

Les grilles CSS (qu'on appelle aussi Grid Layout) sont une autre solution pour pouvoir centrer verticalement du contenu avec le CSS.

Un peu comme avec flexbox, il est possible d'utiliser les propriétés justify-items et align-items :

.conteneur {
  display: grid; /* On active les grilles */
  justify-items: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  height: 400px;
  border: 1px solid black;
}

Et pour notre HTML :

<div class="conteneur">
  <p>Ce contenu est centré verticalement avec une grille CSS (Grid)</p>
</div>

Testez par vous-même :

Comme vous pouvez le constater, l'exemple ressemble beaucoup à flexbox. À vrai dire, seule la proprité display: grid est différente.

On privilégie les grilles CSS plutôt que flexbox dans les scénarios très complexes pour lesquels plusieurs éléments doivent être alignés simultanément dand différentes directions.

Comment centrer verticalement avec line-height ?

Pour centrer verticalement un texte dans un conteneur avec une hauteur fixe, vous pouvez utiliser la propriété line-height. Cette méthode est souvent utilisée pour des éléments de texte courts comme des boutons ou des titres.

Voici comment vous devez faire :

1. définissez pour commencer une hauteur fixe (c'est très important) pour le parent ;
2. ajustez la valeur de line-height pour qu'elle soit égale à la hauteur de l'élément parent.

Prenons un petit exemple :

.bloc-texte {
  height: 100px; /* On définie une hauteur de 100px */
  line-height: 100px; /* On définie aussi line-height à 100px ici */
  border: 1px solid black;
}

Et du côté du HTML :

<div class="bloc-texte">
  Ce contenu est centré verticalement avec line-height
</div>

Le résultat :

Dans cet exemple, le texte est parfaitement centré à l’intérieur du conteneur de 100px de hauteur grâce à la propriété line-height.

Cette méthode fonctionne uniquement pour des blocs de texte d’une seule ligne. Si le texte s’étend sur plusieurs lignes, cette technique ne sera plus efficace.

Comment centrer verticalement avec position: absolute ?

Une autre technique courante pour centrer verticalement un élément consiste à utiliser la propriété position: absolute. En combinant cette propriété avec des ajustements sur les axes top, bottom, left, et right, vous pouvez centrer un élément par rapport à son parent assez facilement. 😬

Voici comment vous pouvez faire :

1. ajoutez la propriété position: relative à la balise parente afin que votre élément absolu prenne bien comme référence votre balise parente et pas la balise body ;
2. renseignez ensuite la propriété position: absolute à l'élément que vous souhaitez centrer certicalement ;
3. puis ajustez l'ensemble avec les propriétés top, bottom, left et right si besoin, ainsi que la propriété transform pour déplacer votre élément.

Voici un exemple :

.conteneur {
  position: relative; /* On définie la position relative */
  height: 400px;
  border: 1px solid black;
}

.element-centre {
  position: absolute; /* On définie la position absolue */
  top: 50%; /* On place à 50% du haut l'élément */
  left: 50%; /* Puis à 50% à gauche */
  transform: translate(-50%, -50%); /* On recentre l'élément sur les deux axes */
}

Enfin, voici notre HTML :

<div class="conteneur">
  <p class="element-centre">
    Ce contenu est centré verticalement avec une position absolue
  </p>
</div>

Essayez ce code :

Ici, la technique du transform: translate(-50%, -50%) permet de ramener l'élément au centre exact de son conteneur, à la fois verticalement et horizontalement.

N'oubliez pas que cette méthode est extrêmement puissante, mais elle nécessite que l'élément parent ait une position relative.

Comment centrer verticalement avec display: table ?

Avant l’arrivée de flexbox et des grilles CSS, une méthode classique pour centrer verticalement un élément était de simuler une structure de tableau avec display: table. Bien que moins populaire aujourd'hui, elle est très utile pour se la péter en entretien technique.

Prenons cet exemple :

.conteneur {
  display: table; /* On définit un tableau */
  height: 400px;
  width: 100%;
  border: 1px solid black;
}

.element-centre {
  display: table-cell; /* On veut simuler des cellules */
  vertical-align: middle; /* On centre notre unique cellule verticalement */
}

Et dans notre HTML :

<div class="conteneur">
  <p class="element-centre">
    Ce contenu est centré verticalement avec un tableau
  </p>
</div>

Et la démonstration live :

Dans cet exemple, nous utilisons la propriété vertical-align: middle pour centrer verticalement le texte dans un conteneur simulant une cellule de tableau.

Lorsque vous utilisez display: table-cell, l’élément est traité comme une cellule de tableau, ce qui donne accès à des propriétés spécifiques aux tableaux, comme vertical-align et text-align.

Comparaison des méthodes pour centrer verticalement

Conclusion

Le centrage vertical avec CSS n'est plus aussi compliqué comme cela pouvait être souvent le cas il y a des dizaines d'années !

Dorénavant, avec des techniques nouvelles générations (vive flexbox et les grilles), centrer verticalement un texte ou une image peut se faire en 4 secondes top chrono. ✨

Pour aller plus loin avec le HTML et le CSS, consultez notre formation dédiée.