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á:

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

css.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í:

css.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:

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