Centrer un bloc div, guide complet
Comment centrer une div ? Steve Pear fait le tour de la question du centrage de div en CSS et propose des solutions pour tous les cas de figure.
Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le contenu d'une div est simple, mais centrer la div elle-même est plus délicat, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur.
L'objectif de cet article est de montrer comment centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div.
NdT : Steve Pear s'intéresse ici spécifiquement au centrage d'une div : pour une introduction complète au centrage du contenu d'une div, consultez l'article Centrer en CSS, un guide complet, de Chris Coyier : le centrage du contenu d'une div n'est pas aussi simple que le dit Steve Pear !
Centrer une div dans une page, les bases
Cette méthode fonctionne avec n'importe quel navigateur.
.center-div {
margin: 0 auto;
width: 100px;
}Le résultat dans CodePen (vous pouvez cliquer sur HTML et CSS pour en voir le contenu ou sur edit on CodePen pour le modifier) :
voir
Centering a div in a page, basic de Steve Pear dans CodePen
La valeur auto de la propriété margin donne aux marges gauche et droite l'espace restant disponible dans la page. Il faut bien se rappeler de donner une propriété width à votre div.
Centrer une div dans une div, à l'ancienne
Cela fonctionne avec à peu près tous les navigateurs.
.outer-div {
padding: 30px;
}
.inner-div {
margin: 0 auto;
width: 100px;
}
//HTML
<div class="outer-div">
<div class="inner-div">
</div>
</div>Le résultat dans CodePen :
voir
Centering a div within a div, old-school de Steve Pear dans CodePen
La marge auto frappe encore, et la div intérieure doit avoir une propriété width.
Centrer une div dans une div avec inline-block
Avec la méthode inline-block, la div intérieure n'a pas besoin de propriété width. Fonctionne avec tous les navigateurs raisonnablement modernes.
.outer-div {
padding: 30px;
text-align: center;
}
.inner-div {
display: inline-block;
padding: 50px;
}
//HTML
<div class="outer-div">
<div class="inner-div">
</div>
</div>La propriété text-align ne fonctionne qu'avec les éléments inline. La valeur inline-block affiche la div intérieure comme un élément inline et block, ce qui permet à la propriété text-align de la div extérieure de centrer la div intérieure.
Centrer une div dans une div, horizontalement et verticalement
On utilise l'astuce margin auto pour centrer une div dans le sens horizontal et vertical, et cela fonctionne avec tous les navigateurs modernes.
.outer-div {
padding: 30px;
}
.inner-div {
margin: auto;
width: 100px;
height: 100px;
}
//HTML
<div class="outer-div">
<div class="inner-div">
</div>
</div>Le résultat dans CodePen :
voir
Centering a div within a div, horizontally and vertically de Steve Pear dans CodePen
La div intérieure doit avoir des propriétés width et height. Cette méthode ne fonctionne pas si la div extérieure a une hauteur fixe.
Centrer verticalement une div avec transform
Cette méthode utilise transform pour centrer verticalement tout contenu à l'intérieur d'une div. On fait appel à un élément HTML vide qui sert de conteneur, ici j'ai choisi <p>.
.center-div p
{
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
// HTML
<div class="center-div">
<p>Esse augue dolor</p>
</div>
}La valeur perspective réduit le flou (blurring) sur un affichage haute-définition. Pour une meilleure compatibilité avec les navigateurs anciens, vous pouvez utiliser les préfixes constructeurs comme -webkit-transform et -ms-transform. Ce dernier remonte jusqu'à IE9.
Centrer une div en bas de page
Ici, on utilise margin auto et une div externe positionnée absolument. Fonctionne avec tous les navigateurs modernes.
.outer-div {
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
//HTML
<div class="outer-div">
<div class="inner-div">
</div>
</div>La div intérieure doit avoir une propriété width. La distance la séparant du bas de page est définie grâce à la propriété bottom de la div extérieure.
Pour centrer une div en haut de page, remplacez la propriété bottom par top.
Centrer une div dans une page, horizontalement et verticalement
On utilise là encore margin auto, et une div extérieure positionnée absolument. Fonctionne avec tous les navigateurs modernes.
.center-div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
}La div doit avoir les propriétés width et height.
Centrer une div dans une page, responsive
La largeur de la div est responsive, elle s'adapte à la largeur du viewport. Fonctionne sur tous les navigateurs.
.center-div
{
margin: 0 auto;
max-width: 700px;
}La div centrée doit avoir une propriété max-width.
Centrer une div dans une div responsive
La div intérieure est responsive. Fonctionne avec tous les navigateurs.
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
max-width: 700px;
}La div intérieure doit avoir une propriété max-width.
Centrer deux divs responsives, côte à côte
Deux divs côte à côte, toutes les deux sont responsives. Fonctionne avec tous les navigateurs.
.container
{
text-align: center;
}
.left-div
{
display: inline-block;
max-width: 300px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
}
@media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
//HTML
<div class="container">
<div class="left-div">
</div>
<div class="right-div">
</div>
</div>Pour cela on utilise juste deux éléments inline-block dans un conteneur centré. Notez qu'on fait également appel à la media query de CSS. Lorsque la taille d'écran est inférieure à 600px, la propriété max-width de chacune des divs est fixée à 100%.
Flexbox et le centrage de div
Le nouveau modèle de mise en page Flexbox simplifie le centrage. L'exemple ci-dessous centre une div horizontalement et verticalement.
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item
{
background-color: #f3f2ef;
border-radius: 3px;
width: 200px;
height: 100px;
}La propriété height du conteneur peut être ce qu'on veut, du moment qu'elle est plus large que la div centrée. Dans cet exemple, nous utilisons vh, qui est la hauteur de la fenêtre du navigateur, le viewport, plutôt que la hauteur de la page.
Centrer une div dynamique, horizontalement et verticalement
Cette méthode utilise la propriété display avec une valeur de table, ce qui lui donne le comportement d'un élément table et centre la div horizontalement et verticalement. La div centrée peut avoir un contenu dynamique, et donc une hauteur ou une largeur variable. Elle peut être responsive.
.outer-div
{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.mid-div
{
display: table-cell;
vertical-align: middle;
}
.center-div
{
margin: 0 auto;
width: 300px;
height: 100px;
}Les propriétés width et height de la div centrée peuvent être ce que vous voulez.
Ressources complémentaires
Consultez également dans La Cascade :