Comment centrer les choses avec style en CSS

Nous nous sommes tous retrouvés frustrés de centrer les choses en CSS

Soyons honnêtes. Un point dans nos carrières de codage, nous avons tous été frustrés de centrer des choses en CSS, et nous avons cherché comment centrer une div au sein d’une div sur Google ou Stack Overflow.

Cela devrait être l’une des tâches les plus simples, mais peut devenir source de confusion lorsque vous ajoutez plus d’éléments et de styles à votre page.

Comme il s’agit d’un problème courant, j’ai compilé une liste de méthodes de centrage en CSS. J'ai également inclus embeds / links avec chaque exemple que j'ai créé dans CodePen. N'hésitez pas à insérer, partager ou copier comme vous le souhaitez!

Voir mes CodePens ici.

Sans plus tarder, allons-y!

Méthode d'alignement de texte

La méthode «text-align: center» est peut-être la plus courante pour le centrage. Il est principalement utilisé pour centrer le texte sur votre page HTML, mais il peut également être utilisé pour centrer les divs.

Le truc ici est de:

  1. entourez la div que vous souhaitez centrer avec un élément parent (généralement appelé wrapper ou conteneur)
  2. définir text-align: center to parent
  3. puis configurez la division intérieure pour afficher: inline-block

Dans mon exemple avec le carré bleu, je le joins à un autre div appelé conteneur bleu-carré. Afin de centrer mon carré bleu, je devais créer un élément parent et définir la propriété display de mon carré bleu sur inline-block.

En effet, par défaut, la propriété d’affichage d’une div est définie sur block, ce qui signifie qu’elle couvrira toute la largeur de la page. En définissant la propriété display de mon carré bleu sur inline-block, nous nous assurons que celui-ci ne s'étendra que sur la largeur que j'ai définie, soit 100 pixels.

L'ajout de plusieurs éléments enfants dans l'élément parent (les carrés bleus dans cet exemple) les centrera tous.

Méthode automatique de la marge

Une autre méthode courante de centrage consiste à utiliser la méthode automatique des marges. En utilisant cette méthode, nous n’avons pas besoin d’un élément parent.

Nous pouvons simplement appliquer margin: 0 auto à notre boîte jaune, tant que nous avons une largeur définie.

margin: 0 auto est un raccourci pour définir les marges supérieure et inférieure à zéro et les marges gauche et droite sur auto.

Ceci est important, car sans la largeur de 100 pixels que j'ai définie, le navigateur ne pourra pas afficher les marges gauche et droite nécessaires pour centrer la zone jaune. En définissant la largeur, le navigateur distribue automatiquement la bonne quantité de marge de chaque côté de la zone jaune.

La partie «0» peut être définie sur le nombre de pixels souhaité pour les marges supérieure et inférieure.

Une autre astuce intéressante consiste à définir marge-gauche sur auto ou marge-droite sur auto, ce qui nous permet de pousser notre div vers le côté droit ou gauche de la page, respectivement - essayez ceci!

Méthode de positionnement absolu

Le positionnement absolu d'un élément nous permet essentiellement de placer l'élément où nous le voulons sur la page… avec un inconvénient.

Le positionnement absolu supprime l'élément du flux de la page.

Pourquoi est-ce important?

Eh bien, c’est important parce que cela peut entraîner un chevauchement des éléments s’il n’est pas utilisé correctement.

Si nous voulons simplement centrer un élément horizontalement sur la page, comme nous l’avons fait avec les deux premières méthodes, nous devons nous rappeler trois étapes:

  1. Définissez la propriété de position de l'élément sur absolue
  2. Appliquer “left: 50%” à l'élément
  3. Définir une marge à gauche de la moitié de la largeur de l'élément

Dans cet exemple, nous utilisons un carré vert (quel beau vert!). Il a la même taille que les autres exemples, notre largeur est donc toujours de 100 pixels.

Comme vous pouvez le constater, j’ai donné «position: absolu» et appliqué «gauche: 50%» à notre carré vert. Cela indique au navigateur de déplacer le bord gauche de 50% vers la droite.

Mais si vous recréez cet exemple, nous ne voulons pas que le bord gauche se trouve au milieu, nous voulons que le milieu du carré s’aligne au milieu de la page.

Cela nous amène à notre dernière étape. Pour aligner les éléments et compenser l’espace supplémentaire, nous appliquons une marge gauche de la moitié de la largeur du carré vert. Dans notre cas, c’est 50px (quelle que soit la largeur de l’élément, il sera toujours à moitié).

Méthode de transformation / traduction

Jusqu’à présent, nous n’avions centré que horizontalement, mais qu’en est-il si nous voulons mettre quelque chose au centre de la page?

Centrons notre carré rouge horizontalement et verticalement.

Bien que cette méthode utilise également le positionnement absolu et la «gauche: 50%», j’ai également appliqué deux propriétés supplémentaires à l’élément.

En définissant également la propriété supérieure à 50%, je demande au navigateur d’aligner verticalement le bord supérieur de notre carré rouge avec le milieu de la page. Mais comme dans l'exemple précédent, nous ne voulons pas que les bords soient alignés avec le centre, nous voulons que le centre de notre carré s'adapte juste au-dessus du centre de notre page.

Nous appliquons ici une nouvelle propriété appelée transform.

Vous pouvez faire de nombreuses choses intéressantes avec la transformation, telles que la traduction, la rotation et la mise à l'échelle des animations, mais pour cet exemple, nous utiliserons la traduction.

Nous donnons la propriété de transformation «transform: translate (-50%, -50%)» et le tour est joué - notre carré rouge est centré à la fois horizontalement et verticalement!

J'aime cette méthode car, quelle que soit la largeur ou la hauteur de notre élément, il sera toujours au centre de la page.

Cette méthode est fréquemment utilisée dans les conceptions réactives et ne nécessite pas de définition de marges, comme dans la méthode de positionnement absolu.

Méthode Flexbox

Si vous n'êtes pas familier avec Flexbox, c'est bon! Flexbox est un module de présentation qui offre un moyen plus efficace d’aligner et de placer des éléments sur la page.

Si vous souhaitez apprendre Flexbox (hautement recommandé), Flexbox Froggy est un moyen d’apprendre génial et amusant (sans affiliation bien sûr - c’est exactement ce que j’avais appris à apprendre Flexbox!).

Les quatre étapes permettant de centrer horizontalement et verticalement avec Flexbox sont les suivantes:

  1. Le HTML, le corps et le conteneur parent doivent avoir une hauteur de 100%
  2. Définir l'affichage pour qu'il s'adapte au conteneur parent
  3. Définissez align-items sur le conteneur parent
  4. Configurez content-content pour qu'il soit centré sur le conteneur parent

Définir l'affichage sur flex sur le parent le définit comme un conteneur flex.

En définissant align-items au centre, nous disons que les enfants ou les éléments flex doivent être centrés verticalement dans le parent.

Justify-content fonctionne de la même manière, mais dans le sens horizontal pour notre exemple.

J'aime aussi utiliser cette méthode car, encore une fois, elle est à la fois réactive et ne nécessite aucun calcul de marge.

J'espère que vous avez trouvé cet article informatif et utile. J'aimerais entendre vos commentaires!

Merci d'avoir lu! :)

Apprendre JavaScript? Cela peut vous aider!