Comment Centrer une div en CSS ?

Centrer une div en CSS est un besoin récurrent lors de la création de landing-pages. Mais quelle méthode adopter pour cela ? On fait le point.

Afin de centrer notre div en CSS, considérons la structure HTML suivante :

<body>
	<div id="centered">👌</div>
</body>

Centrer une div en absolute

La première approche pour centrer une div consiste à faire appel à un positionnement absolu.

copié !

#centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

D’abord on déclare la <div> comme étant positionnée de manière absolue (avec position: absolute) par rapport au body. La balise <body> étant par défaut un élément positionné en relative.
Puis, top: 50% et left: 50% permettent de décaler l’élément à centrer de 50% du haut et de la gauche par rapport à l’élément parent.
Enfin, on le re-décale de la moitié de sa taille vers le haut et la gauche avec transform: translate(-50%, -50%) afin de centrer le milieu de l’élément et non son coin supérieur gauche.

La seconde approche pour centrer une div en CSS consiste à utiliser le modèle de boîte flexible.

copié !

body {
	display: flex;
	justify-content: center;
	align-items: center;
}

D’abord on déclare le conteneur comme étant flexible avec display: flex.
Puis, justify-content: center indique que l’espace autour des boîtes flexibles doit être réparti uniformément autour des éléments selon l’axe principal (par défaut en ligne) du conteneur.
Enfin, align-items: center indique que l’espace autour des boîtes flexibles doit être réparti uniformément autour des éléments selon l’axe secondaire (par défaut en colonne) du conteneur.

Afin que le centrage vertical soit visible, il faut bien entendu qu’une hauteur soit déclarée pour le body (exemple : 100vh).

La dernière approche pour centrer une div en CSS consiste à exploiter les grilles CSS pour un centrage optimal dans les 2 axes.

copié !

body {
	display: grid;
	place-items: center;
}

D’abord on déclare le conteneur en tant que grille avec display: grid.
Puis, on centre dans les 2 axes l’élément avec place-items: center (un combiné des propriétés align-items et justify-items. Si seule une valeur est fournie, elle concerne les deux propriétés).

Afin que le centrage vertical soit visible, il faut bien entendu qu’une hauteur soit déclarée pour le body (exemple : 100vh).

CSS propose dorénavant d’exploiter la propriété align-content en dehors dehors d’un contexte flex ou grid.

On peut désormais utiliser classiquement les propriétés :

copié !

body {
	text-align: center;
	align-content: center;
}

Cette approche permet de conserver un placement block, simplifiant grandement la mise en page.