Comment centrer avec CSS ?

Centrer avec CSS est une véritable plaie bien souvent ! On finit toujours par ne plus savoir comment faire, surtout quand on débute.

Gardez donc cet article dans vos favoris pour vous épargner de recherche à chaque fois sur internet.

Avec CSS nous pouvons centrer de plusieurs manières :

• avec les grilles
• avec flexbox
• avec la propriété position
• avec les marges externes
• avec la propriété text-align

Centrer avec les grilles

Ajoutez ce code sur la balise qui regroupe vos éléments à centrer :

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

Centrer avec flexbox

Nous pouvons également centrer grâce à flexbox, en regroupant tous les éléments à centrer une balise parente (que nous utilisons comme .items).

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

Centrer avec la propriété position

Une autre option est d'utiliser la propriété position pour demander à notre élément d'être centrer au centre de son élément parent.

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

Centrer avec les marges externes

Rien de plus simple grâce à cette méthode : il suffit d'utiliser la propriété margin en précisant une valeur auto.

.item {
    margin: 0 auto;
    width: 50%;
    display: block;
}

Centrer avec la propriété text-align

Enfin, nous pouvons centrer du texte grâce à la propriété text-align que nous connaissons tous.

.item {
    text-align: center;
}

Conclusion

Désormais, impossible de ne plus savoir par quel moyen centrer avec CSS !

Bon à savoir

Si vous voulez en savoir plus sur HTML et CSS, prenez une minute pour aller voir notre formation complète sur HTML et CSS. ✨