¿Cómo centrar texto verticalmente en un div usando CSS?

Preparación de la estructura HTML

Crea una estructura HTML con un contenedor div y contenido de texto:

<div class="container">
  <p>Este texto se centrará vertical y horizontalmente.</p>
</div>

Esta estructura te proporciona una base con la que trabajar. El div exterior es tu contenedor, y el párrafo contiene el texto que quieres centrar.

Aplicación de propiedades Flexbox

Flexbox centra el contenido vertical y horizontalmente. Aplica estas propiedades CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Establece una altura */
  border: 1px solid #ccc; /* Opcional: para visibilidad */
}

Esto es lo que hacen estas propiedades:

• display: flex convierte el contenedor en un contenedor flexible.
• align-items: center centra los elementos flex verticalmente.
• justify-content: center centra los elementos flex horizontalmente.
• Establece una height para el contenedor para ver el centrado vertical.

Este método funciona para texto de una sola línea y de múltiples líneas. Se ajusta a diferentes tamaños de pantalla.

.container {
  /* Alternativa para navegadores más antiguos */
  display: table;
  width: 100%;
  height: 200px;
}

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

/* Flexbox para navegadores modernos */
@supports (display: flex) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container p {
    display: block;
  }
}

Configuración del CSS

La técnica de altura de línea centra verticalmente el texto de una sola línea en un div. Así es como se configura:

.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

En este CSS:

• Establece la height del div al valor deseado (100px en este ejemplo).
• Iguala el line-height a la altura del div. Esto empuja el texto hacia el centro.
• Añade text-align: center para el centrado horizontal.

La estructura HTML es simple:

<div class="container">
  Texto Centrado
</div>

Este método funciona haciendo que el texto ocupe toda la altura del contenedor, empujándolo hacia el centro.

.container {
  /* ... estilos existentes ... */
  white-space: nowrap;
  overflow: hidden;
}

Limitaciones del método de altura de línea

Esta técnica tiene algunas limitaciones:

• Funciona mejor para texto de una sola línea. Con múltiples líneas, el texto puede desbordarse o cortarse.
• Para contenido de múltiples líneas, este método puede causar problemas de espaciado. Cada línea intentará ocupar toda la altura del contenedor.
• Si el texto es más largo que el ancho del contenedor, se envolverá y romperá la alineación vertical.

Por estas razones, la técnica de altura de línea es más útil cuando tu contenido permanecerá en una sola línea y cabe dentro del ancho del contenedor.

Uso de CSS para Crear un Comportamiento Similar a una Tabla

El método de visualización de tabla utiliza CSS para crear un comportamiento similar a una tabla. Este método centra el texto verticalmente en un div:

.container {
  display: table;
  height: 200px;
  width: 100%;
}

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

Aplica estos estilos a tu HTML:

<div class="container">
  <div class="content">
    Tu texto va aquí. Puede ser una o varias líneas.
  </div>
</div>

Este CSS hace lo siguiente:

• display: table en el div padre crea una estructura similar a una tabla.
• display: table-cell en el elemento hijo hace que se comporte como una celda de tabla.
• vertical-align: middle centra el contenido verticalmente dentro de la celda.

.container {
  height: 50vh; /* 50% de la altura del viewport */
}

Ventajas del Método de Visualización de Tabla

Este método tiene varias ventajas:

1. Funciona para texto de una o varias líneas. El contenido se ajusta dentro del contenedor.

2. Tiene buena compatibilidad con navegadores, incluyendo versiones antiguas de Internet Explorer.

3. La técnica es fácil de implementar y requiere CSS mínimo.

4. Mantiene el flujo natural del texto, evitando problemas con saltos de línea o desbordamiento de texto.

Establece una altura en el div contenedor para ver el efecto de centrado vertical. Ajusta el ancho según sea necesario para tu diseño.

Configuración del Contenedor de Cuadrícula

La Cuadrícula CSS ofrece una forma sencilla de centrar texto verticalmente en un div. Así es cómo se configura:

.container {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

En este CSS:

• display: grid convierte el contenedor en un diseño de cuadrícula.
• place-items: center centra el elemento de la cuadrícula vertical y horizontalmente.

La estructura HTML es simple:

<div class="container">
  <p>Este texto está centrado usando Cuadrícula CSS.</p>
</div>

Este método centra el contenido independientemente de su longitud o número de líneas.

Ventajas de la Cuadrícula CSS

La Cuadrícula CSS tiene varios beneficios para centrar texto:

1. Necesita pocas propiedades CSS para lograr el centrado.

2. Funciona bien con diferentes tipos de contenido, incluyendo texto de varias líneas, imágenes o elementos anidados.

3. Los diseños de cuadrícula se adaptan a diferentes tamaños de pantalla sin consultas de medios adicionales.

4. No es necesario agregar elementos de envoltura adicionales.

5. La cuadrícula permite la colocación exacta de elementos dentro del contenedor.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@supports (display: grid) {
  .container {
    display: grid;
    place-items: center;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 200px;
  gap: 20px;
}

.item {
  text-align: center;
}

<div class="container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>

La Cuadrícula CSS proporciona una solución limpia para centrar texto verticalmente en un div, haciéndola una buena opción para el desarrollo web.

Técnica de posicionamiento absoluto

La técnica de posicionamiento absoluto centra el texto verticalmente usando propiedades de posicionamiento CSS:

.container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

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

Estructura HTML:

<div class="container">
  <div class="text">Texto centrado</div>
</div>

Este método funciona así:

• position: relative en el contenedor crea un contexto de posicionamiento.
• position: absolute en el elemento de texto lo saca del flujo normal.
• top: 50% mueve el texto hasta la mitad del contenedor.
• left: 50% mueve el texto hasta la mitad del ancho del contenedor.
• transform: translate(-50%, -50%) desplaza el texto hacia atrás por la mitad de su propio ancho y altura.

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Método de relleno para centrar texto

El método de relleno usa un relleno igual en la parte superior e inferior para centrar el texto verticalmente:

.container {
  padding: 50px 0;
  text-align: center;
  border: 1px solid #ccc;
}

Estructura HTML:

<div class="container">
  <p>Texto centrado usando relleno</p>
</div>

Esta técnica funciona así:

• Añadiendo padding igual en la parte superior e inferior del contenedor.
• Usando text-align: center para el centrado horizontal.

Para diseño responsivo, usa unidades de porcentaje o viewport para el relleno:

.container {
  padding: 10% 0;
}

Esto permite que el relleno se ajuste basado en el ancho del contenedor, manteniendo el efecto de centrado en diferentes tamaños de pantalla.

.container {
  padding: 50px 0;
  min-height: 200px;
}

Ambos métodos ofrecen opciones para necesidades específicas de diseño, con la técnica de posicionamiento absoluto proporcionando un control preciso y el método de relleno ofreciendo simplicidad y capacidad de respuesta.