centrage vertical et horizontal

Centrage vertical et horizontal en CSS

Pour capter l'attention, certaines pages Web affichent un contenu centré horizontalement et verticalement : un cadre publicitaire, une image agrandie, un formulaire de connexion, un effet lightbox, etc.

En partant de ce code HTML :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="fond">
        <div class="centre"></div>
    </div>
</body>

</html>

Voici deux variantes CSS pour centrer un <div class="centre"> :

Propriétés CSS top, left et transform: translate

Les propriétés top: 50% et left: 50% positionnent un carré bleu à partir du centre vertical et horizontal de la fenêtre du navigateur. Pour obtenir un centrage parfait, la propriété CSS translate le remonte de la moitié de la hauteur du carré et le recule de la moitié de sa largeur (soit 200 pixels).

.fond {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.centre {
    width: 400px;
    height: 400px;
    background-color: #2b303b;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

La propriété CSS position: fixed immobilise le carré au centre, même si l'utilisateur fait défiler le contenu de la page.

La valeur CSS translate(-50%, -50%) recule le carré d'une distance égale à sa moitié

Propriétés CSS display: flex, align-items: center et justify-content: center

Ce deuxième code utilise la propriété display: flex appliqué au bloc parent <div class="fond">.

.fond {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.centre {
    width: 400px;
    height: 400px;
    background-color: #2b303b;
}

Dans cet exemple, la propriété align-items permet de centrer verticalement et la propriété justify-content permet de centrer horizontalement. On obtient alors ceci :

Centrage vertical et horizontal
Le langage CSS permet un centrage vertical et horizontal sur tous les écrans

Un exemple d'utilisation du centrage de la connexion chez Facebook :

centrage CSS

Ci-dessous, une réduction centrée sur un site de vente en ligne :

Il y a un commentaire pour cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.