Comment centrer horizontalement et verticalement une boîte dans son conteneur

Code HTML de tous les exemples

Dans les différents exemples le code HTML sera identique !
Le code HTML de chaque exemple :

<body> <h1>Centrage ...</h1> <div id ="grande_boite"> <div id ="petite_boite"> <p>Post hanc adclinis Libano monti Phoenice, ... </div> </div> </body>

Le centrage horizontal de la boîte

Pour le centrage horizontal c'est facile il suffit d'utiliser les propriétés margin-left et margin-right avec la valeur auto.
Attention il faut attribuer un width à la boîte à centrer !

La feuille de style

#grande_boite{ border : 1px solid red; width : 90%; height : 400px ; margin :auto ;} #petite_boite {background : pink ; width : 40% ; margin :10px auto 10px auto;} div p{margin : 10px ; font-size : 14pt; text-align : justify; }

La boîte à centrer a une largeur de 300px et les marges gauche et droite sont règlées à auto (2ième et 4ième arguments de la méga propriété margin).
Rendu de la page avec le code CSS ci-dessus

Le centrage vertical de la boîte dans son parent

Margin-top :auto et margin-bottom :auto ça n'existe pas ! Et c'est bien dommage ...
La solution consiste à utiliser top : 50% et margin-left : - moitié de la hauteur de la boîte.

Si vous utilisez la propriété top il faut positionner en absolu la boîte !
Il faut donc que le conteneur soit lui même positionné (en fixe / relatif / absolu) afin afin que les top et left soient calculés par rapport à l'angle haut gauche du conteneur (et pas de l'écran).

La feuille de style

#grande_boite{ position : relative ; width : 90% ;border : 1px solid red; height : 400px ; margin :auto;} #petite_boite {position : absolute ; height : 200px ; top : 50% ; margin-top :-100px ; left : 0px ; background : pink ; } div p{margin : 10px ; font-size : 14pt; text-align : justify; }

La boîte à centrer est positionnée en absolu.
La boîte à centrer a une hauteur de 200px (largeur non précisée donc identique à celle du conteneur). Aussi la valeur de margin-top est égal à -100px (la moitié de 200)! Rendu de la page avec le code CSS ci-dessus

Le centrage horizontal et vertical de la boîte dans son parent

La feuille de style

#grande_boite{ position : relative ; width : 90% ;border : 1px solid red; height : 400px ; margin : auto ; } #petite_boite {position : absolute ; width : 60% ; height : 200px ; top : 50% ; margin-top :-100px ; left : 50% ; margin-left : -30%; background : pink ; } div p{margin : 10px ; font-size : 14pt; text-align : justify; }

Il faut impérativement que la boîte ait une hauteur et une largeur et soit positionnée en absolu.
Donc pour le centrage horizontal on ne peut plus utiliser margin-left et margin-right à auto (incompatible avec le positionnement absolu).
Il faut donc combiner les propriétés left : 50% et margin-left : - moitié de la largeur
Rendu de la page avec le code CSS ci-dessus

La boîte est bien centrée horizontalement et verticalement. Mais comme j'ai dû lui attribuer une hauteur et une largeur la taille est insuffisante par rapport au contenu. Il faut rajouter overflow :auto pour gérer le débordement.

Conclusion

Le centrage d'une boîte dans son conteneur et plus particulièrement le centrage vertical est délicat en CSS2.
Mais rassurez vous ça devient très facile en CSS3 avec un nouvel outil : les boîtes flexibles.
Le concept de "boîtes flexibles" est traité dans le "tutoriel CSS3" de ce site !
Retour menu