CSS centrage du body

Publié le par 
body {
    background-color: #000000;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction:column; /* centre en colonne mettre flex-direction: row; pour centrer en ligne */
    justify-content: center;   /* centre horizontalement */
    align-items: center;       /* centre verticalement */
}

Explication du code

🔹 background-color: #000000;

Définit un fond noir pour la page.

🔹 margin: 0;

Supprime les marges automatiques appliquées par le navigateur au body.

🔹 height: 100vh;

vh signifie viewport height.
100vh correspond à 100% de la hauteur visible de l’écran.

🔹 display: flex;

Active le modèle Flexbox, qui permet d’aligner facilement des éléments.

🔹 justify-content: center;

Centre le contenu sur l’axe horizontal (gauche ↔ droite).

🔹 align-items: center;

Centre le contenu sur l’axe vertical (haut ↕ bas).

Change le fond noir en dégradé :

background: linear-gradient(135deg, #000, #222);