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.
On va juste créer un conteneur parent une div enfant, styliser sommairement le tout.
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;
}
Cette propriété va permettre d’aligner les enfants sur l’axe horizontal.
.wrapper {
justify-content: center;
display: flex;
}
.wrapper {
align-items: center;
display: flex;
justify-content: center;
}
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;
}
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.