Souvent dans les sites web, nous avons la problématique de centrer une boite (div) verticalement et horizontalement dans l’écran.
Dans ce tutoriel, je vais montrer comment utiliser une technique très simple qui utilise le CSS uniquement pour accomplir ceci. Toutefois, une condition est requise, est que la div à centrer soit d'’une taille connue à l’avance (en pixels ou en pourcentages). Ce genre de centrage est idéal pour centrer des formulaires comme la boîte de’authentification (login) par exemple.
Dans le tutoriel, nous allons centrer un div jaune dont la taille est 500x200 dans le navigateur.
D’abord, appliquons le css pour obtenir une page noire :
1: body{
2: background-color:black;
3: }
La technique est simple, utiliser deux div, une conteneur et une div centrée. La div conteneur doit prendre toute la largeur et être positionné verticalement à 50%. En d’autres mots, son Y démarre à partir de la moitié du ViewPort du navigateur.
1: div#conteneur {
2: position: absolute;
3: top: 50%;
4: left: 0px;
5: width: 100%;
6: }
La div à centrer est dans la div conteneur. Elle a une largeur fixe (500px) et une hauteur fixe (200px). Pour la centrer horizontalement, on affecte 50% à left. Toutefois ce n’est pas suffisant car la div n’est pas tout à fit au milieu. Elle commence par le milieu. Pour réellement la centrer, il faut la décaler à gauche de la moitié, en d’autres mots, utiliser une marge gauche qui est égale négativement à la moitié de la largeur :
1: div#centree {
2: width: 500px;
3: height: 200px;
4: margin-left: -250px; /* moitié de la largeur */
5: position: absolute;
6: top: -100px; /* moitié de la hauteur */
7: left: 50%;
8: background-color:Yellow;
9: }
Le même principe est appliqué à height et margin-top. Et le tour est joué, vous pouvez voir le résultat ici.