Centrer un élément en CSS

L’une des questions les plus posées concernant la manipulation de l’UI – ou la mise en forme d’une page, si vous préférez – est probablement celle du centrage horizontal et vertical d’un élément. Nous avons vu naître divers astuces au fil du temps afin de répondre à cette question, en voici quelques-unes :

Avec un tableau

Bien que devenu obsolète dans la mise en page d’un site web, la disposition en tableaux est toujours utilisée afin de – justement – créer un tableau.

• Horizontal
  • Pour un usage unique via l’élément
    • text-align: center;
• Vertical
  • Pour un usage unique via l’élément
    • vertical-align: middle;

* Pour utiliser cette manipulation, il est soit possible d’utiliser une balise <table> soit la créer de manière artificielle avec display: table.

En conclusion

Afin de centrer sur les deux axes, il suffira de mettre le code ci-dessous :

th, td {
    text-align: center;
    vertical-alin: middle;
}

Avec un affichage de type en ligne, boîte ou boîte en ligne

Plus connu dans sa langue d’origine, les éléments d’affichage de type block, inline ou encore inline-block ont une méthode de centrage un peu plus particulier.

• Horizontal
  • Pour un usage global via un container
    • text-align: center;
  • Pour un usage unique via l’élément
    • une largeur définie (display: block; ou width: x px;)
    • margin: 0 auto;
• Vertical
  • Pour un usage global via un container ou unique via l’élément
    • position: relative; (sur le container)
    • position: absolute; (sur le(s) élément(s))
    • top: 50%; (sur les éléments)

Vous pouvez utiliser une position: absolute sur le container mais vous remarquerez que bien que l’élément s’approche du centre de son container, nous n’y sommes pas encore ! En cause, le point d’origine, ce dernier est utilisé pour les positionnements mais se situe au coin supérieur gauche de votre élément, or, pour que le centrage soit parfait, il faudrait que ce point d’origine se trouve au centre de l’élément, ce que l’on peut réaliser avec l’un des deux codes suivants:

• transform: translate(-50%, -50%);
• transform-origin: 50% 50%;

Ci-dessous, une démonstration présentant un élément avec son point d’origine à sa position initiale, en survolant le cadre, le point d’origine se déplacera jusqu’au centre :

	transform: translate(x);	transform-origin: x;
Compatibilité		*²
Sémantique	*³

*² Cette propriété CSS ne fonctionne pas sur tous les éléments (les tracés vectoriels, par exemple).
*³ Là où transform-origin déplace le point d’origine, transform: translate ne fait que déplacer l’élément par rapport au point d’origine, sémantiquement, il est préférable d’utiliser transform-origin quand vous le pouvez.

En conclusion

Pour centrer verticalement et horizontalement avec les méthodes habituelles, il faudra utiliser:

.votreContainer { position: relative }

.votreElement {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

Avec Flexbox

Grâce à la propriété display: flex, il est encore plus facile de centrer un élément dans un container:

• Horizontal
  • Pour un usage global via un container
    • display: flex;*⁴
    • justify-content: center;
  • Pour un usage unique via l’élément
    • margin: 0 auto;
• Vertical
  • Pour un usage global via un container
    • display: flex;*⁴
    • align-items: center;
  • Pour un usage unique via l’élément
    • align-self: center;

*⁴ Pour utiliser cette manipulation, il est nécessaire d’activer la propriété display: flex sur un container parent.

En conclusion

Pour centrer verticalement et horizontalement en flexbox, il faudra utiliser:

.votreContainer { display: flex }

.votreElement { margin: auto }

Si cet article vous a aidé dans le positionnement de vos éléments, un partage et un commentaire sont toujours appréciés !