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;
}
<code>margin: 0</code> 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;
}
<code>display: flex</code> permet de définir le body comme un conteneur flexbox, <code>align-items: center</code> centre le cowboy verticalement, <code>justify-content: center;</code> centre le cowboy horizontalement.
Ce qui nous donne pour le CSS :
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}