Centrer un élément sur X et Y en CSS

Lorsqu’on commence la programmation, on apprend vite à centrer un élément grâce à text-align: center. Grâce à cette technique, on peut centrer un élément horizontalement, mais comment centrer un élément sur toute la page ?

Pour cela, c’est assez simple, on va utiliser les flexbox !

Je vous conseille de vous documenter sur les flexbox, c’est très utile et pas du tous compliqué. Il existe un jeu web pour apprendre les utiliser si ça vous intéresse : flexboxfroggy.com.

Centrer le cowboy sur une page vide

Le HTML est vide avec juste le cowboy :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Centrer le cowboy</title>
</head>

<body>
    <div id="cowboy">🤠</div>
</body>
</html>

Le CSS n’est pas compliqué, on fait en sorte que le conteneur body prenne toute la place de l’écran : de haut en bas et de droite à gauche.

html, body {
    height: 100%;
    margin: 0;
}

margin: 0 permet d’enlever les marges mise par défaut

Ensuite on utilise les flexbox pour le body afin de centrer le cowboy.

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

display: flex permet de définir le body comme un conteneur flexbox, align-items: center centre le cowboy verticalement, justify-content: center; centre le cowboy horizontalement.

Ce qui nous donne pour le CSS suivant :

html, body {
    height: 100%;
    margin: 0;
}

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