1. Centrer une div : mission impossible ?

Tout développeur web débutant (et même expérimenté !) s’est déjà arraché les cheveux en essayant de centrer une simple <div> en CSS.

En théorie, ça semble simple. En pratique… c’est un casse-tête. Pourquoi ? Parce qu'il y a plusieurs manières de le faire, et elles ne fonctionnent pas toutes selon le contexte.

2. Les différentes méthodes (et leurs pièges)

📌 La méthode classique : margin: auto;

On pourrait penser qu’un simple :

.box {
    width: 200px;
    margin: auto;
}

fera l’affaire. Eh bien… non ! Ça ne marche que si la div a une largeur définie et que son parent est en display: block;. Pas très flexible.

📌 text-align: center; (et son piège)

Si vous essayez de centrer une div avec text-align: center;, mauvaise nouvelle : ça ne fonctionne que pour du texte, pas pour un élément block.

📌 La méthode position: absolute;

Une autre technique consiste à utiliser :

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

Ça marche bien... sauf si le parent n'a pas une position définie ou si on veut un design responsive.

📌 Flexbox à la rescousse !

Avec display: flex;, le centrage devient (presque) un jeu d’enfant :

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

Facile, non ? Sauf si... on oublie que ça affecte tous les enfants du parent.

📌 La méthode ultime : CSS Grid

Encore plus simple avec CSS Grid :

.parent {
    display: grid;
    place-items: center;
}

Mais si le projet est ancien et qu'il faut supporter des navigateurs obsolètes... c'est un problème.