Centrer avec flex
Problème et solution
Nous avons déjà vu comment centrer un élément horizontalement dans un conteneur à l'aide de la technique du margin: 0 auto;. Toutefois, si nous désirons aussi centrer un élément verticalement, cette technique ne nous sera pas utile. Nous utiliserons donc une technique qui utilise la disposition flex.
La technique est simple: utiliser les propriétés align-items et justify-content pour forcer un élément au centre d'un autre. Voici comment faire:
HTML
CSS
À noter:
Pour que cette technique fonctionne, assurez-vous que votre conteneur a une hauteur plus grande que le contenu. Il ne sert à rien de centrer un contenu verticalement si celui-ci a la même hauteur que conteneur.