centrage vertical et horizontal

Centrage vertical et horizontal

Certaines pages ont besoin d'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 le <div class="centre"> :

Propriétés position: fixed et transform: translate

Ce premier code permet de centrer un contenu grâce à la propriété CSS position. Le principe est de positionner un div à la moitié de la hauteur et de la largeur de la page, puis de le remonter de la moitié de la hauteur et de le reculer de la moitié de la largeur du contenu.

.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%);
}

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

Ce deuxième code utilise la propriété display: flex pour le bloc parent .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: center permet de centrer verticalement et la propriété jusitify-content: center permet de centrer horizontalement. On obtient alors ceci :

Centrage vertical et horizontal
Magnifique !

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

centrage CSS

Articles connexes

Langage CSS : syntaxe et placement La volonté du consortium est de séparer le fond de la forme, dans deux langages distincts. Ce n'était pas le cas du HTML 3 qui mélangeait tout et demeurait assez confus....
Sélecteurs CSS Avant de surcharger votre code HTML avec des classes et autres id pour identifier des balises, la bonne stratégie consiste à savoir utiliser le plus possible les sélecteurs CSS. Sa...
Les positionnements CSS La mise en page Web nécessite une bonne compréhension des langages HTML et CSS. Il existe beaucoup de méthodes très différentes pour positionner des éléments sur une pag...
Quelques ingrédients "responsive" Contrairement à une feuille A4 aux dimensions définies et limitées, une page Web a des dimensions variables et élastiques. La variété des écrans, passant du 30 pouces pour un desk...
Principales propriétés et valeurs CSS Voici un petit dictionnaire des feuilles de style les plus courantes, mais je précise que la liste est loin d’être exhaustive. Pour la liste complète, je vous conseille le site d’...
There is 1 comment for this article

Laisser un commentaire

Votre adresse de messagerie 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.