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: 0permet 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: flexpermet de définir le body comme un conteneur flexbox,align-items: centercentre le cowboy verticalement,justify-content: centercentre 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;
}