Cómo centrar elementos usando el modelo de caja

Una tarea muy común en el desarrollo web es centrar elementos. Podemos centrarlos tanto de forma horizontal como vertical.

Centrado horizontal

Centrar de forma horizontal es bastante sencillo. Nuestro elemento necesita tener un ancho definido. Si no lo tiene, ocupará todo el espacio posible.

Definimos el margen en 0 auto y el elemento tomará la misma cantidad de espacio entre la izquierda y la derecha.

margin: 0 auto;

Centrado vertical

Cuando queremos centrar de forma vertical usando el modelo de caja, necesitamos un elemento adicional como contenedor. Con el ancho completo, el elemento interior debe tener una altura definida. Configuramos el contenedor con position: absolute, restamos un 50% desde la parte superior (top: 50%) y usamos un margen negativo con la mitad del valor de la altura del elemento.

{
  position: absolute;
  top: 50%;
  margin-top: half- height;
}

Ejemplo

Ver ejemplo en CodePen

Foto de Thought Catalog en Unsplash