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.
- Englober ton élément enfant dans un conteneur parent*
- Ajouter la propriété
text-align: center;au conteneur parent - 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 :
- Le parent (le conteneur) doit avoir une hauteur de 100%
- Ajouter la propriété
display: flex;au conteneur parent afin de permettre l’utilisation de la disposition flexible des éléménets. - Ajouter la propriété
align-items: center;au conteneur parent. - Ajouter la propriété
justify-content: center;au conteneur parent. - 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 :
- Lui attribuer une largeur, on va dire
width: 300px; - Lui attribuer une
position: absolute; - 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é.
- 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 😉
