Alineación de elementos de bloque en CSS

La propiedad margin se utiliza no solo para establecer márgenes, sino también para centrar elementos de bloque. Para ello, los márgenes derecho e izquierdo deben establecerse en auto.

En el siguiente ejemplo, el bloque interno se centrará:

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

Tenga en cuenta que de esta manera solo se puede centrar elementos de bloque, solo horizontalmente y solo si tienen un ancho definido.

Si necesitamos diferentes márgenes superior e inferior margin, podemos escribirlo así:

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

También se puede reescribir usando tres valores: el primero establece el margen superior, el tercero - el inferior, y el segundo establece el valor auto para los márgenes derecho e izquierdo:

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

Repita la página según el ejemplo, haciendo que los bloques verdes se posicionen en el centro de su elemento padre: