Comment centrer n'importe quoi avec CSS - Aligner un div, du texte, etc.

Centrer les choses est l'un des aspects les plus difficiles de CSS.

Les méthodes elles-mêmes ne sont généralement pas difficiles à comprendre. Au lieu de cela, c'est davantage dû au fait qu'il y a tellement de façons de centrer les choses.

La méthode que vous utilisez peut varier en fonction de l'élément HTML que vous essayez de centrer ou selon que vous le centrez horizontalement ou verticalement.

Dans ce didacticiel, nous verrons comment centrer différents éléments horizontalement, verticalement et à la fois verticalement et horizontalement.

Comment centrer horizontalement

Centrer les éléments horizontalement est généralement plus facile que de les centrer verticalement. Voici quelques éléments communs que vous voudrez peut-être centrer horizontalement et différentes manières de le faire.

Comment centrer le texte avec la propriété CSS Text-Align Center

Pour centrer le texte ou les liens horizontalement, utilisez simplement la text-alignpropriété avec la valeur center:

Hello, (centered) World!

p { text-align: center; }

Comment centrer une div avec CSS Margin Auto

Utilisez la marginpropriété raccourci avec la valeur 0 autopour centrer les éléments au niveau du bloc comme divhorizontalement:

.child { ... margin: 0 auto; }

Comment centrer une division horizontalement avec Flexbox

Flexbox est le moyen le plus moderne de centrer les éléments sur la page et rend la conception de mises en page réactives beaucoup plus facile qu'auparavant. Cependant, il n'est pas entièrement pris en charge dans certains navigateurs hérités comme Internet Explorer.

Pour centrer un élément horizontalement avec Flexbox, il suffit d'appliquer display: flexet justify-content: centerà l'élément parent:

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

Comment centrer verticalement

Centrer des éléments verticalement sans méthodes modernes comme Flexbox peut être une véritable corvée. Ici, nous allons passer en revue certaines des méthodes plus anciennes pour centrer les choses verticalement d'abord, puis vous montrer comment le faire avec Flexbox.

Comment centrer une division verticalement avec le positionnement absolu CSS et les marges négatives

Pendant longtemps, c'était le moyen idéal pour centrer les choses verticalement. Pour cette méthode, vous devez connaître la hauteur de l'élément que vous souhaitez centrer.

Tout d'abord, définissez la displaypropriété de l'élément parent sur relative.

Ensuite, pour l'élément enfant, définissez la displaypropriété sur absoluteet topsur 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Mais cela ne centre que verticalement le bord supérieur de l'élément enfant.

Pour vraiment centrer l'élément enfant, définissez la margin-toppropriété sur -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Comment centrer une div verticalement avec Transformer et Traduire

Si vous ne connaissez pas la hauteur de l'élément que vous souhaitez centrer (ou même si vous le faites), cette méthode est une astuce astucieuse.

Cette méthode est très similaire à la méthode des marges négatives ci-dessus. Définissez la displaypropriété de l'élément parent sur relative.

Pour l'élément enfant, définissez la displaypropriété sur absoluteet topsur 50%. Maintenant, au lieu d'utiliser une marge négative pour vraiment centrer l'élément enfant, utilisez simplement transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Notez que translate(0, -50%)c'est un raccourci pour translateX(0)et translateY(-50%). Vous pouvez également écrire transform: translateY(-50%)pour centrer l'élément enfant verticalement.

Comment centrer une div verticalement avec Flexbox

Tout comme le centrage horizontal des objets, Flexbox facilite le centrage vertical des objets.

Pour centrer un élément verticalement, appliquez display: flexet align-items: centerà l'élément parent:

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

Comment centrer verticalement et horizontalement

Comment centrer une division verticalement et horizontalement avec le positionnement absolu CSS et les marges négatives

Ceci est très similaire à la méthode ci-dessus pour centrer un élément verticalement. Comme la dernière fois, vous devez connaître la largeur et la hauteur de l'élément que vous souhaitez centrer.

Définissez la displaypropriété de l'élément parent sur relative.

Définissez ensuite la displaypropriété de l'enfant sur absolute, topsur 50%et leftsur 50%. Cela centre simplement le coin supérieur gauche de l'élément enfant verticalement et horizontalement.

Pour vraiment centrer l'élément enfant, appliquez une marge supérieure négative définie sur la moitié de la hauteur de l'élément enfant et une marge gauche négative définie sur la moitié de la largeur de l'élément enfant:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Comment centrer une div verticalement et horizontalement avec Transformer et Traduire

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

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

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

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

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.