Centrage d'une boite dans son conteneur

Le centrage horizontal d'une boite dans son conteneur n'a jamais posé de difficulté. Il suffit d'appliquer à l'élément "block" enfant les propriétés margin-left : auto & margin-right : auto.
Par contre le centrage vertical était un casse-tête en CSS 2. En effet margin-top : auto & margin-bottom : auto ça marchait pas.
La seule solution était de positionner la boite "enfant" en absolu.

Centrer la boite enfant avec position : absolute

Le code HTML de l'exemple

<div id ="conteneur"> <div id ="enfant"> <p>Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis. </div> </div>

La boite identifiée "enfant" est contenue dans la boite identifiée "conteneur".

Le code CSS de l'exemple

		#conteneur{ position : relative ; width : 900px ;border : 1px solid red; height : 400px ; margin : auto ; }
		#enfant {position : absolute ; width : 60% ;  height : 200px ;
		top : 50% ; margin-top :-100px ;  
		left : 50% ; margin-left : -30%; 
		background : pink ; }
		...

C'est assez subtil.
Pour que les left & top soient calculés par rapport au coin supérieur gauche du conteneur (et non pas le coin supérieur gauche de la fenêtre) le conteneur doit lui même être positionné en absolu (ou relatif ou fixe).
Pour le centrage horizontal il faut régler left à 50% & margin-left à - la moitié de la largeur de l'enfant donc ici à "-30%".
Pour le centrage verticale il faut régler top à 50% & margin-top à - la moitié de la hauteur de l'enfant donc ici à "-100px". Testez le code !

Utilisez l'outil flexbox

La version 3 de CSS révolutionne la pratique du positionnement en introduisant l'outil flexbox (boites flexibles).

Le code HTML

Il est identique à la solution précédente !

La feuille de style

	#conteneur{display : flex; width : 900px; border : 1px solid red; ; height : 400px ; margin : 20px auto 20px auto; }
	#enfant {margin : auto;background : pink ; width : 40% ; } 

C'est d'une simplicité déconcertante !
Il faut appliquer au conteneur display : flex.
Il faut appliquer à la boite "enfant" : margin : auto Testez le code !
Retour menu