CSS - Centrer un élément parfaitement avec Flexbox

9 juin 2017

Grâce à la propriété Flexbox, il est devenu assez facile de centrer horizontalement et verticalement un élément. Flexbox est arrivé avec de nouvelles propriétés CSS. Celles qui nous intéressent ici sont align-items et justify-content.

Alignement de bases

On va juste créer un conteneur parent une div enfant, styliser sommairement le tout.

Align-items

La propriété align-items va permettre d’aligner verticalement un élément enfant d’un container flex. Pour que cette propriété soit prise en compte, il faut bien sûr ajouter la propriété display: flex

.wrapper {
  align-items: center;
  display: flex;
}

Justify-content

Cette propriété va permettre d’aligner les enfants sur l’axe horizontal.

.wrapper {
  justify-content: center;
  display: flex;
}

La solution finale

.wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

Bonus

Si jamais vous voulez appliquer cette solution, mais avec deux enfants (comme ici dans l’exemple un titre et un sous-titre), il faut ajouter au conteneur parent la propriété flex-direction: column

.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Le mot de la fin

On peut remercier l’arrivée de Flexbox, car quelque chose qui a été longtemps laborieux depuis l’abandon des structures de pages crée en tableau, il redevient facile de centrer des éléments verticalement et horizontalement.