Tutoriel code

Centrer un bloc (div) en CSS

Le 13 février 2012, mis à jour le 12 juin 2017

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

 

Youcef Kébaïli

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.