Alinhamento de elementos de bloco em CSS

A propriedade margin é usada não apenas para definir margens, mas também para centralizar elementos de bloco. Para isso, as margens direita e esquerda devem ser definidas como auto.

No exemplo abaixo, o bloco interno ficará centralizado:

<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;
}

Lembre-se, dessa forma você pode centralizar apenas elementos de bloco, apenas horizontalmente e apenas se uma largura for definida para eles.

Se precisarmos de margens superior e inferior diferentes margin, podemos escrever assim:

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

Também pode ser reescrito com três valores: o primeiro definirá a margem superior, o terceiro - a inferior, e o segundo definirá o valor auto para as margens direita e esquerda:

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

Repita a página conforme o exemplo, fazendo com que os blocos verdes fiquem centralizados em relação ao seu elemento pai: