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

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

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