Logo - laConsole
Image de couverture - Comment centrer une div en CSS ?

Comment centrer une div en CSS ?

Il existe de nombreuses manières de centrer horizontalement et verticalement une div en CSS. Concentrons-nous sur les 3 méthodes principales avec position absolute, flex et grid.

Icône de calendrier
Icône de chronomètre 2 min
css ui/ux

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 avec une position absolue

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%);
}
  1. D’abord on déclare la <div> comme étant positionnée de manière absolue par rapport au body avec position: absolute (la balise <body> étant par défaut un élément positionné en relative).
  2. 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.
  3. 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.

Centrer une div avec les boôtes flexibles

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;
}
  1. D’abord on déclare le conteneur comme étant flexible avec display: flex.
  2. 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.
  3. 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).

Centrer une div avec les grilles CSS

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;
}
  1. D’abord on déclare le conteneur en tant que grille avec display: grid.
  2. 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).

Lire aussi