El centrado de elementos es una tarea fundamental en el desarrollo de interfaces web. CSS ofrece múltiples mecanismos para lograrlo, cada uno con características particulares que se adaptan a diferentes escenarios de diseño. Comprender sus diferencias y aplicaciones es clave para implementar layouts precisos.

Los elementos del DOM se comportan de distinta manera según su modelo de visualización. Los elementos a nivel de bloque (block) ocupan toda la línea disponible y permiten establecer dimensiones explícitas como width y height. Los elementos en línea (inline) fluyen dentro del texto y solo aceptan márgenes horizontales. Existen también elemnetos de bloque en línea (inline-block) que combinan características de ambos.

Centrado con text-align

El alineamiento horizontal de elementos en línea se controla directamente mediante la porpiedad text-align. Aplicar text-align: center a un contenedor afecta a todos sus hijos de tipo inline, como textos, imágenes o campos de formulario.

.contenedor-principal {
  text-align: center;
}

<div class="contenedor-principal">
  <span>Elemento centrado</span>
  <img src="imagen.jpg" alt="Ejemplo">
</div>

Este enfoque es exclusivamente horizontal. Para centrar verticalmente un texto de una sola línea, se puede igualar la propiedad line-height a la altura del contenedor.

Margin automático para bloques

Los elementos de bloque con un ancho definido pueden centrarse horizontalmente asignando margin: 0 auto. El navegador distribuye el espacio restante equitativamente en los márgenes laterales.

.caja-contenido {
  width: 280px;
  margin-left: auto;
  margin-right: auto;
}

Esta técnica requiere que el elemento tenga una propiedad width distinta de auto.

Flexbox: control bidimensional

El modelo Flexbox simplifica notablemente el centrado. Definiendo el contenedor como display: flex, se puede alinear el contenido en ambos ejes simultáneamente.

.contenedor-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

<div class="contenedor-flex">
  <div class="hijo">Contenido flexible</div>
</div>

Las propiedades justify-content y align-items ofrecen gran flexibilidad para distribuir el espacio entre los elementos hijos.

CSS Grid y place-items

Con CSS Grid, el centrado se consigue con una sintaxis aún más concisa. La propiedad place-items es un atajo para definir simultáneamente el alineamiento vertical y horizontal.

.cuadricula {
  display: grid;
  place-items: center;
  height: 500px;
}

Para controlar un solo eje, se pueden usar justify-items (horizontal) o align-items (vertical) de forma independiente.

Posicionamiento absoluto con transformación

Esta técnica combina posicionamiento absoluto y transformaciones CSS para desplazar el elemento la mitad de sus propias dimensiones, logrando un centrado preciso sin depender de conocimiento previo de su tamaño.

.elemento-absoluto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Contenedor padre requiere position: relative */

Es efectivo para cualquier tipo de elemento y funciona independientemente de las dimensiones del mismo.

Cálculos dinámicos con calc()

La función calc() permite realizar operaciones matemáticas mixtas, combinando porcentajes con unidades fijas. Esto es útil cuando se conoce el tamaño del elemento pero no el del contenedor.

.elemento-calculado {
  width: 320px;
  margin-left: calc(50% - 160px);
}

/* Centrado vertical con viewport */
.elemento-viewport {
  height: 250px;
  margin-top: calc(50vh - 125px);
}

Tabla como alternativa

Aunque menos recomendado en diseños modernos, el modelo de tabla puede resolver situaciones específicas de centrado.

.contenedor-tabla {
  display: table;
  width: 100%;
}

.celda {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="contenedor-tabla">
  <div class="celda">
    <div>Contenido centrado</div>
  </div>
</div>

Este enfoque preserva el flujo de documentos pero sacrifica parte de la flexibilidad de los modelos de caja modernos.