Comment centrer horizontalement une DIV dans une autre en CSS ?

En CSS, on peut centrer des éléments imbriqués dans d'autres. Par exemple, il est possible de centrer un élément dans un autre.

En CSS, on peut centrer des éléments imbriqués dans d'autres. Par exemple, il est possible de centrer un élément <div> dans un autre (à voir aussi sur le même thème la fiche pratique : Comment utiliser un sélecteur pour sélectionner une image dans une div cliquable ?). La méthode la plus simple consiste à utiliser la propriété margin, qui gère les marges entre les éléments.

Attribuer à la marge horizontale de l'élément la valeur auto permet de fixer les marges de manière à centrer la division horizontalement vis-à-vis de son élément parent. Bien entendu, il faut que la largeur de la division intérieure soit inférieure à celle de l'élément supérieur. On note que le 0 précédant la valeur auto correspond à la valeur des marges verticales : 

#interieure
{
 margin : 0 auto;
}
Pour Internet Explorer 8, il est nécessaire de rajouter la propriété display : table afin de pouvoir centrer horizontalement un élément.
#interieure
{
 display : table;
 margin : 0 auto;
}

Une autre possibilité pour centrer une division est d'utiliser pour cette division la propriété display : inline-block combinée à la propriété text-align:center pour la division extérieure. La division intérieure sera alors traitée comme du texte à l'intérieure d'une division et centrée horizontalement :

#exterieure {
 text-align: center;
}
#interieure {
 display: inline-block;
}

CSS en pratique :

HTML/CSS