Comment centrer cette satanée div en CSS

Introduction

Que celui ou celle qui n’a jamais cherché frénétiquement comment centrer une div en css sur Google ou parmi les réponses de StackOverflow lève la main ?

Par moment le CSS fait un peu l’effet d’une magie noire, comme si c’était quelque chose d’indomptable, d’incertain et de totalement aléatoire.

Ce n’est pourtant pas quelque chose de complexe mais cette problématique de centrage en CSS fait un peu pâle figure quand on voit des réalisations exceptionnelles sur Awwwards ou des Codepen magnifiques !

Aujourd’hui, on va voir simplement comment centrer des éléments (et pas forcément une <div>) en CSS.

Le méthode classique

La méthode en question est un raccourci pour définir les marges du haut et du bas à zéro et les marges de gauche et de droite en automatique.

Pour que cela fonctionne, il faut que l’élément dispose au préalable d’une largeur à l’aide d’une width et le navigateur se chargera d’appliquer automatiquement la propriété CSS des marges.

… et sa méthode siamoise

Une autre façon d’utiliser la technique des marges en respectant une largeur prédéfinie d’un élément est de lui appliquer les deux propriétés margin-left: auto; et margin-right: auto;

Résultat ? L’élément est poussé à gauche et à droite de façon équivalente et est donc centré, CQFD 😅

La méthode du hack de < div >

Cela fait probablement partie des propriétés CSS que l’on apprend au tout début car c’est grâce à elle que l’on peut centrer du texte… mais pas seulement !

text-align: center permet aussi de centrer des éléments et pour cela, il faut : englober ton élément dans un conteneur.

  1. Englober ton élément enfant dans un conteneur parent*
  2. Ajouter la propriété text-align: center; au conteneur parent
  3. Enfin, ajouter la propriété display: inline-block; à l’enfant

*On appelle communément wrapper ou container (en anglais) des balises qui ont pour rôle d’être le parent qui contient ses enfants.

La méthode Flexbox (ma préférée 😍)

C’est la méthode que je préfère utiliser de façon générale. Apprendre Flexbox c’est un game-changer dans un parcours d’intégrateur / développeur front-end.

Centrer sur l’axe des x et des y, c’est presque un jeu d’enfant une fois les bases apprivoisées :

  1. Le parent (le conteneur) doit avoir une hauteur de 100%
  2. Ajouter la propriété display: flex; au conteneur parent afin de permettre l’utilisation de la disposition flexible des éléménets.
  3. Ajouter la propriété align-items: center; au conteneur parent.
  4. Ajouter la propriété justify-content: center; au conteneur parent.
  5. Ne pas oublier de donner une largeur et une hauteur à l’élément enfant.

Et voilà ! Un élément centré sans se prendre la tête avec des calculs de marges ou quoi que ce soit. 🤩

Petit conseil au passage 👇

💡 Tu confonds la différence entre align (vertical) et justify (horizontal) ?

Alors, rappelle toi que dans un logiciel de traitement de texte comme Word, tu peux justifier ton texte (donc horizontalement) pour qu’il soit bien calé sur les deux marges.

Les autres méthodes à connaître

Le positionnement absolu (le vilain petit canard) 😈

Pour faire bref, le positionnement absolu, c’est celui qui est probablement un peu moins apprécié car il vient perturber le « flux » et très honnêtement, à mes débuts dans le CSS… il me donnait des migraines.

En réalité, il retire simplement le flux naturel de l’élément pour que tu puisses le positionner absolument (t’as capté ? 🤪) où tu veux dans ta page. Ce n’est pas si complexe que ça :

Pour centrer un élément absolu, il faut :

  1. Lui attribuer une largeur, on va dire width: 300px;
  2. Lui attribuer une position: absolute;
  3. Bouger l’élément vers la droite avec un left: 50%;

Jusque là, c’est très bien mais on a centré le côté gauche de notre élément et ce qu’on veut, c’est que ce soit parfaitement centré.

  1. La dernière étape consiste à donner une margin-left: 150px; (ce qui équivaut toujours à la moitié de la largeur de notre élément)

Ça va, tu es toujours là avec moi ? 😅

Si tu veux aller plus loin, je te conseille un ancien article de qualité (en 2 parties) proposé par Alsacréations :

1️⃣ Initiation au positionnement en CSS (Partie 1)

2️⃣ Initiation au positionnement CSS (partie 2)

Translate() et Transform() 🤓

Si tu te contentes de faire une intégration standard sans trop de fioritures, la méthode Flexbox est largement suffisante.

C’est bien de connaître d’autres façons de faire car il arrive toujours que tu tombes sur LE projet qui te demande LA SEULE propriété CSS sur laquelle tu es en sueur… #Vécu

J’aurai tendance à garder ces propriétés dans 2 cas de figure :

  • Quand on veut centrer horizontalement et verticalement
  • Ou quand on veut changer l’espace des coordonnées pour mettre en forme un élément (lien vers la documentation MDN ici )

Code & Never Stop !

Avant de te laisser sur ces belles paroles, je ne peux que t’inciter à pratiquer ce que je t’ai écrit au-dessus… ou à pratiquer ce sur quoi tu te formes en ce moment.

📌 La pratique quotidienne, c’est réellement la clef du succès ; n’oublie jamais que 1 vaut mieux que 0.

Si ce contenu t’a plu, je prépare une série d’article sur le mindset du CSS… dis-moi si ça te fait envie en commentaire, sur Twitter ou sur le Slack 😉

Partager l'article

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Les points-clefs de l'article

Codeuse.fr

Ces articles peuvent aussi t'intéresser 👇