Alignement des éléments de bloc en CSS

La propriété margin n'est pas seulement utilisée pour définir les marges, mais aussi pour centrer les éléments de bloc. Pour cela, les marges droite et gauche doivent être définies sur la valeur auto.

Dans l'exemple ci-dessous, le bloc interne sera centré :

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Gardez à l'esprit que de cette façon, vous ne pouvez centrer que les éléments de bloc, uniquement horizontalement et seulement si une largeur leur est attribuée.

Si nous avons besoin de marges margin haute et basse différentes, nous pouvons l'écrire comme ceci :

.child {
	margin: 30px auto 10px auto;
}

Il est également possible de le réécrire avec trois valeurs : la première définira la marge haute, la troisième - la marge basse, et la seconde définira la valeur auto pour les marges droite et gauche :

.child {
	margin: 30px auto 10px;
}

Reproduisez la page selon l'exemple, en faisant en sorte que les blocs verts soient positionnés au centre de leur parent :