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