Centrer des éléments en CSS : Laissez tomber les casse-têtes, voici les solutions

Maîtriser les Techniques de Centrage en CSS

Si vous avez déjà passé des heures à essayer de centrer un élément en CSS, vous n’êtes pas seul. Qu'il s'agisse d'images, de boutons, ou de divisions (div), le centrage peut rapidement devenir un cauchemar, surtout lorsqu'il s’agit de gérer la compatibilité entre navigateurs ou écrans de tailles variées. Mais croyez-moi, avec les bonnes techniques, ce problème appartient au passé.

Dans cet article, nous allons explorer plusieurs méthodes infaillibles pour centrer vos éléments, que ce soit horizontalement, verticalement, ou les deux. Des techniques basiques aux astuces plus avancées, vous saurez tout pour que vos éléments soient parfaitement centrés, à chaque fois.

Prêt à en finir avec ces galères ? Let’s go !

Techniques basiques mais simples

Méthode 1 : text-align

Commençons simple. Vous pouvez utiliser la propriété text-align pour centrer du texte à l'intérieur de son conteneur. Attention, ce sera le texte qui sera centré.

Méthode 2 : text-align et display inline-block

Dans le conteneur, mettre la valeur de text-align à center. Ensuite, dans le contenu, mettre la valeur de display en inline-block. Et voilà !

Méthode 3 : margin auto

Cette technique ne marche qu'avec les éléments de type block. Donc si nous avons affaire à un élément de type inline (comme les images, du texte en span...), il faudra changer son display à block.

Il faudra simplement mettre les marges gauches et droites en auto. Optionnellement, nous pouvons mettre les marges hautes et basses à 0.

NB : Pour que cela marche, l'élément à centrer doit avoir une largeur inférieure à 100% sinon bien évidement ce dernier va donc occuper tout l'espace de son conteneur et donc ne pas apparaître comme centré.

Techniques avancées

Méthode 4 : Flexbox le couteau suisse

C'est la technique la plus versatile de ce tutoriel. En effet, flexbox permet non seulement de centrer les éléments horizontalement, mais aussi verticalement. Donc si on ne devait garder qu'une seule méthode, ce serait celle-ci. Sans plus attendre, voici comment faire :

• Changer la valeur de la propriété “display” en “flex”.

• Aligner horizontalement en changeant la propriété “justify-content” en “center”.

• Aligner verticalement en changeant la propriété “align-item” en “center”.

• Avec la propriété “flex-direction” en “column”, les axes sont inversés. Ainsi pour centrer horizontalement (align-items: center) et verticalement (justify-content: center). Si vous ne savez pas de quoi je parle, je vous invite à consulter mon article dédié à Flexbox !

Méthode 5 : Grid

1. Centrer un seul élément (horizontalement et verticalement à la fois)

Pour centrer un seul élément dans un conteneur avec CSS Grid, il suffit de transformer le conteneur en une grille, puis d’utiliser les propriétés place-items.

1. Centrer plusieurs éléments

Pour centrer plusieurs éléments, on peut utiliser justify-content et align-content pour contrôler l'alignement des éléments dans le conteneur. Dans l'exemple qui suite, nous avons trois animaux dans un conteneur ferme.

1. Centrer la grille en entière

Il est possible d'utiliser place-content pour une grille entière avec plusieurs éléments tout en gardant la grille compacte. On reprend le même exemple que précédemment, mais au lieu d'utiliser justify-content et align-content on va utiliser notre nouvelle propriété.

Méthode 6 : Centrer un élément en position absolute

Une des façons les plus populaires et efficaces pour centrer un élément en CSS consiste à utiliser la combinaison de position: absolute avec transform. Cette méthode est particulièrement utile lorsque vous voulez centrer un élément de manière précise par rapport à son conteneur.

Explication :

1. position: absolute : Cette propriété positionne l'élément relativement à son conteneur parent qui est positionné (ayant position: relative ou absolute par exemple). Cela signifie que l'élément peut être déplacé en fonction des coordonnées spécifiées (left, top, etc.).

2. left: 50%; top: 50% : Ces deux propriétés positionnent le coin supérieur gauche de l'élément à 50% de la largeur et de la hauteur de son conteneur. Autrement dit, cela place l'élément à peu près au centre, mais uniquement par son coin supérieur gauche, ce qui le décale légèrement.

3. transform: translate(-50%, -50%) : Ici, nous utilisons une petite formule pour déplacer l'élément de -50% de sa propre largeur et -50% de sa propre hauteur. En fait, le translate(-50%, -50%) compense ce décalage, déplaçant l'élément pour que son centre soit aligné au milieu du conteneur.

Quand utiliser cette méthode ?

• Cette méthode est idéale lorsque vous devez centrer un élément de taille fixe ou dynamique au milieu de son parent, quelle que soit la taille de ce dernier. C'est particulièrement utile pour centrer des boîtes de dialogues (modal, popup) par exemple.

• Elle fonctionne aussi bien pour centrer des éléments à l'intérieur de conteneurs de dimensions variables.

Conclusion :

Comme tout chose dans la vie, plus vous avez de cordes à votre arc, et mieux c'est. Pourquoi en serait-il différent pour le CSS ? Que vous utilisiez Flexbox, CSS Grid, ou des méthodes plus classiques, il existe une solution adaptée à chaque situation. En appliquant ces techniques, vous serez en mesure de centrer vos éléments avec précision et de manière efficace, quelle que soit la complexité de votre design.

N’oubliez pas que la pratique est la clé. Plus vous jouez avec ces outils, plus vous devenez confiant et créatif. Alors, n’hésitez pas à expérimenter, à explorer et à laisser libre cours à votre imagination ! J'espère que vous aurez au moins appris une chose ou deux. Je vous dis à la prochaine !