Centrer un élément

⏱ 3 minutes | 📚 Facile

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 :

  • 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
      • position: absolute; (sur le container et les éléments)
      • top: 50%; (sur les éléments)
    • Pour un usage unique via l’élément
      • position: absolute; (sur le container et l’élément)
      • top: 50%; (sur l’élément)

Pour le centrage vertical, si la mise en page de votre page se casse en appliquant la position: absolute, je vous invite à utiliser position: relative sur le container.

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%;

Besoin d’un aperçu? Il suffit de survoler le cadre ci-dessous:

avec transform-origin: 50% 50%;

 

transform: translate(x);transform-origin: x;
Compatibilitécomplètepartielle*
Sémantiquerespectéenon respectée


* 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 }

Cet article t’a plu? Alors qu’est-ce que tu attends pour partager 😉 Et vous, utilisez-vous une technique particulière pour centrer vos éléments?




Lenny Obez

Passionné des nouvelles technologies, j'ai suivi des cours en ligne afin de pouvoir concevoir des sites web grâce aux langages HTML5, CSS3, PHP et SQL. Grâce à ce centre d'intérêt, j'ai de bonnes connaissances dans la télécommunication (TEL + NET + TV). Je lance mon blog le 14 février 2016 et publie mon premier article le 22 février de la même année.

Pas de commentaire


Soyez le premier à commenter :)



Tout commentaire est le bienvenue :)

72a2d4fad5c1380f90b2796d141a28e1/////////////////////////
%d blogueurs aiment cette page :