Centrer un bloc div, guide complet

Nous avons tous rencontré le problème du centrage de div en CSS. Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure.

Par

Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le contenu d'une div est assez simple, il suffit de donner à la propriété text-align la valeur center, mais lorsqu'on parle de centrer la div elle-même les choses deviennent plus délicates, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur CSS.

citation du film The Big Lebowski, you are entering a world of pain

L'objectif de cet article est de montrer comment, avec quelques astuces CSS, on peut 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 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) :

See the Pen Centering a div in a page, basic by Steve Pear (@Tipue) on 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 :

See the Pen Centering a div within a div, old-school by Steve Pear (@Tipue) on CodePen.

La marge auto frappe encore, et la div intérieure doit avoir une propriété width.

image tirée du film The Big Lebowski
“On vous l'avait bien dit les gars...”

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, dont IE8.

.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>

Le résultat dans CodePen :

See the Pen Centering a div within a div with inline-block by Steve Pear (@Tipue) on CodePen.

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 :

See the Pen Centering a div within a div, horizontally and vertically by Steve Pear (@Tipue) on 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 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: 70px;
     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>

Le résultat dans CodePen :

See the Pen Centering a div at the bottom of a page by Steve Pear (@Tipue) on CodePen.

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.

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;
}

Le résultat dans CodePen :

See the Pen Centering a div in a page, horizontally and vertically by Steve Pear (@Tipue) on CodePen.

La div doit avoir les propriétés width et height.

Et flexbox ?

Le nouveau modèle de mise en page CSS3 Flexbox devrait rendre le centrage plus simple, lorsque les questions de compatibilité navigateurs seront définitivement réglées.

NdT: Pour plus d'infos à ce sujet, consultez les articles sur Flexbox, en particulier Flexbox, guide complet et Flexbox en un coup de dés.

image tirée du film The Big Lebowski

Article du même auteur sur le même thème
Fixer une div, guide complet


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.


Ressources complémentaires en anglais

How to center anything with CSS, par Joshua Johnson

Ressources complémentaires en français

Centrer en CSS, un guide complet, par Chris Coyier
Centrer les éléments ou un site web en CSS, par Raphaël


original paru le dans le blog de l'agence Tipue.

Sur l'auteur : est responsable de l'agence Tipue basée à Londres, on peut le suivre sur Twitter.

Traduit avec l'aimable permission de Tipue et de l'auteur.
Copyright Tipue © 2014.