Centrer un bloc (div) en CSS

Centrer un bloc (div) en CSS

Centrer verticalement un bloc

Vous souhaitez centrer verticalement un bloc en CSS ? Je vous propose de voir cela ensemble ci-dessous.

CSS

div.conteneur-gris-v {
    height: 100px;							/* Ces deux lignes...  */
    line-height: 100px;						/*	...centrent le bloc vert verticalement */
}
div.center-bloc-vert-v {
    display: inline-block;					/* Transforme l'élément "bloc" en "inline" */
    height: 40px;							/* Vous devez spécifiez une hauteur */
    line-height: 1.2;						/* Rétablit la hauteur de la ligne */
    vertical-align: middle;					/* Ajuste le centrage vertical */
}

HTML

<div class="conteneur-gris-v">
	<div class="center-bloc-vert-v">Ce bloc vert est centré verticalement</div>
</div>

Résultat

Centrer horizontalement un bloc

Vous préférez plutôt centrer votre bloc horizontalement ? C’est ci-dessous qu’il faut voir ça !

CSS

div.conteneur-gris-h {
    height: 100px;				/* Vous devez spécifiez une hauteur */
}

div.center-bloc-vert-h {
    margin: 0 auto;				/* Centre le block horizontalement */
    width: 50%;					/* Vous devez spécifiez une largeur */
}

HTML

<div class="conteneur-gris-h">
	<div class="center-bloc-vert-h">Ce bloc vert est centré horizontalement</div>
</div>

Résultat

Ce bloc vert est centré horizontalement

Centrer verticalement et horizontalement un bloc

CSS

div.conteneur-gris-v-h {
    background: #DDDDDD;
    height: 100px;							/* Ces deux lignes...  */
    line-height: 100px;						/*	...centrent le bloc vert verticalement */
    text-align: center;						/* Centre les éléments de type "inline" contenus dans ce bloc */
}
div.center-bloc-vert-v-h {
    display: inline-block;					/* Transforme l'élément de type "bloc" en type "inline" */
    height: 40px;							/* Vous devez spécifiez une hauteur */
    line-height: 1.2;						/* Rétablit la hauteur de la ligne */
   	text-align: left;						/* Rétablit le centrage du texte */
   	vertical-align: middle;					/* Ajuste le centrage vertical */
    width: 50%;								/* Vous devez spécifiez une largeur */
}

HTML

<div class="conteneur-gris-v-h">
	<div class="center-bloc-vert-v-h">Ce bloc vert est centré verticalement et horizontalement</div>
</div>

Résultat

Ce bloc vert est centré verticalement et horizontalement

CSS, débutant

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

5 commentaires

  1. « Centrer horizontalement et horizontalement un bloc », je crois que tu veux dire « Centrer horizontalement et verticalement un bloc » 😉

    Répondre
    • noooon pas du tout 😉

      Merci pour l’info, je vais corriger ça!

      Répondre
  2. Sympa comme exemple merci. Mais que se passe t-il si les tailles du bloc vert sont en pourcentage ? Car il n’est pas toujours évident de connaître la taille d’affichage qui peut être variable en fonction de la taille de l’écran…

    Répondre
    • Bonjour,

      La taille du bloc vert importe peu, car c’est le parent (le bloc gris) qui est stylé pour que son contenu s’affiche « centré verticalement ». Mais votre question est pertinente, car la contrainte de ce code, c’est justement qu’il faut connaître la taille du parent (le bloc gris) et elle doit être fixe. Ce n’est donc pas adapté à toutes les situations.

      Répondre
  3. Bonjour @D.SCHIRO,
    il existe une solution pour les conteneurs dont la hauteur est spécifiée en % :

    Zone centrée verticalement et horizontalement

    —————————-
    div.conteneur {
    text-align:center; /* centrage horizontal */
    border: 1px solid red;
    height:30%;
    display: table;
    }

    div.bloc {
    display: table-cell;
    vertical-align:middle;
    }

    En espérant avoir pu aider…

    Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint