Cómo centrar imágenes y otros elementos HTML con CSS

Ejemplo de centrado de elemento en su contenedor CSS

Foto de Kelly Sikkema en Unsplash

Centrar imágenes o elementos HTML como formularios, párrafos, títulos, etc., es una de las tareas más comunes en el diseño web y, afortunadamente, CSS nos ofrece múltiples formas de lograrlo. Tanto si  estás diseñando una página web simple o una interfaz de usuario compleja, conocer las técnicas disponibles para llevar a cabo esta labor te permitirá mejorar la presentación y la legibilidad de tu contenido. En este artículo, veremos diversas metodologías para centrar este tipo de elementos horizontal y verticalmente utilizando CSS. Para ello abordaremos desde los métodos más básicos hasta los más avanzados, como Flexbox y Grid, para que puedas elegir el que mejor se adapte a tus necesidades de diseño.

Centrado horizontal de texto usando text-align

La propiedad text-align en CSS es una herramienta esencial para el diseño web, ya que permite controlar la alineación horizontal del contenido de texto dentro de un contenedor de bloque. Esta propiedad se aplica al contenedor en el que se encuentra el texto, no al texto en sí mismo, lo que significa que afecta a todos los elementos de texto dentro de ese contenedor.

La propiedad text-align es la forma más simple y directa de centrar texto horizontalmente dentro de un contenedor de bloque.

Ejemplo

Para ilustrar cómo se utiliza text-align: center, consideremos un ejemplo práctico en el que queremos centrar un título dentro de un div.

See the Pen
Centrar texto con text-align by vlasej (@vlasej)
on CodePen.

En este ejemplo, tenemos un documento HTML simple con una estructura básica que incluye un div con la clase contenedor.  Dentro de este div, hay un elemento h1 con la clase titulo y un párrafo (p).

CSS aplicado:

.contenedor: Esta clase se aplica al div que contiene el texto. Aquí, hemos definido text-align: center;.Esta es la clave para centrar el texto dentro del div. Al aplicarse a .contenedor, todos los elementos de texto dentro de este div (en este caso, el h1 y el p) serán centrados horizontalmente.

.titulo: Esta clase se aplica específicamente al h1 para darle un tamaño de fuente mayor y cambiar el color del texto, lo que no afecta la alineación, pero mejora la estética.

Consideraciones adicionales

  • Compatibilidad: La propiedad text-align es ampliamente compatible con todos los navegadores modernos y antiguos, por lo que es una herramienta fiable para alinear texto.
  • Elementos de bloque: Funciona principalmente con elementos de bloque como div, section, header, etc., que contienen otros elementos de texto.
  • Limitaciones: text-align no tiene efecto en elementos de bloque hijos, solo en el texto dentro de esos elementos. Por ejemplo, si tienes un div dentro de otro div con text-align: center;, el texto dentro del div interior no se centrará automáticamente a menos que se aplique también text-align a ese div.

Centrado horizontal usando margin: auto

La propiedad margin: auto en CSS es una técnica ampliamente utilizada para centrar elementos de bloque horizontalmente dentro de su contenedor. Este método es especialmente útil para centrar elementos como div, section, u otros elementos de bloque. A diferencia de text-align, que se aplica al contenido de texto, margin: auto se utiliza para centrar el propio elemento.

Requisitos y funcionamiento de margin: auto

Para que margin:auto funcione correctamente y centre un elemento, es necesario cumplir con ciertos requisitos:

  1. Ancho definido: El elemento debe tener un ancho (width) definido. Sin un ancho definido, el navegador no podrá calcular el espacio sobrante a cada lado del elemento.
  2. Elemento de bloque: El elemento debe ser de tipo bloque o debe comportarse como un bloque.

Ejemplo

Para entender mejor cómo se utiliza margin: auto, veamos un ejemplo práctico:

See the Pen
Untitled by vlasej (@vlasej)
on CodePen.

En este ejemplo, tenemos un documento HTML básico con un div que tiene la clase contenedor. Dentro del div, hay un párrafo (p) con la clase contenido.

CSS Aplicado:

.contenedor: Esta clase se aplica al div principal. Las reglas CSS establecen un ancho del 50% para el div, y margin: 0 auto; centra el div horizontalmente dentro de su contenedor padre (en este caso, el body del documento).

width: 50%;: Define el ancho del div como el 50% del ancho del contenedor padre.

margin: 0 auto;: La propiedad auto para los márgenes izquierdo y derecho distribuye equitativamente el espacio restante entre ambos márgenes, centrando el elemento.

border: 1px solid #000; y padding: 20px;: Añaden un borde y un padding para mejorar la apariencia visual.

.contenido: Esta clase se aplica al párrafo dentro del div para darle estilo al texto. Aunque esto no afecta al centrado del div se incluye para una mejor presentación del texto.

Consideraciones adicionales

  • Compatibilidad: La propiedad margin: auto es compatible con todos los navegadores modernos, lo que la hace muy fiable para el diseño web.
  • Elementos de bloque: Este método se utiliza principalmente para elementos de bloque (div, section, article, etc.), pero también se puede aplicar a elementos en línea-bloque (inline-block) si tienen un ancho definido.
  • Ancho máximo: Para elementos que deben ocupar un máximo de cierto espacio pero ser centrados, se puede combinar width con max-width. Por ejemplo, max-width: 1200px; y width: 100%; centrará un div que no excederá de 1200px de ancho.
  • Uso en otros contextos: Además de centrar contenedores de texto, margin: auto se puede utilizar para centrar imágenes, formularios, y otros elementos visuales.

Centrado horizontal usando Flexbox

Flexbox permite un control preciso sobre el diseño y la alineación de elementos en una página web, facilitando el centrado de elementos tanto horizontalmente como verticalmente, y adaptándose bien a los diseños responsivos. Flexbox funciona estableciendo un contenedor flex (display: flex) que convierte sus elementos hijos en elementos flexibles. Dentro de este contenedor, varias propiedades de alineación y distribución se pueden aplicar para posicionar los elementos de manera precisa.

Propiedades clave

  1. display: flex: Convierte un contenedor en un contenedor flex, haciendo que sus elementos hijos se alineen según las reglas de flexbox.
  2. justify-content: Controla la alineación de los elementos hijos a lo largo del eje principal (horizontal por defecto).
    • center: Centra los elementos hijos a lo largo del eje principal.
  3. align-items: Controla la alineación de los elementos hijos a lo largo del eje transversal (vertical por defecto).

Ejemplo

Para entender cómo utilizar Flexbox para centrar texto horizontalmente, veamos un ejemplo práctico:

See the Pen
Untitled by vlasej (@vlasej)
on CodePen.

En este ejemplo tenemos un documento HTML con un div que tiene la clase contenedor. Dentro del div, hay una imagen.

CSS Aplicado

  • .contenedor: Esta clase se aplica al div principal. Las reglas CSS incluyen:
  • display: flex;: Convierte el div en un contenedor flex.
  • justify-content: center;: Centra los elementos hijos (el párrafo en este caso) horizontalmente.
  • border: 1px solid #000;: Añade un borde para mejorar la presentación visual.
  • padding: 1rem 0; : Establece un padding vertical de 1rem.

Consideraciones Adicionales

  • Eje Principal y Transversal: En flexbox, el eje principal es por defecto horizontal (de izquierda a derecha), y el eje transversal es vertical (de arriba a abajo). Estos pueden cambiar con la propiedad flex-direction.
  • Compatibilidad: Flexbox es compatible con todos los navegadores modernos. Sin embargo, algunos navegadores más antiguos pueden requerir prefijos específicos de proveedores (como -webkit-).
  • Flex-direction: La dirección de los elementos flex puede ser cambiada a vertical utilizando flex-direction: column;, lo que también cambia el comportamiento de justify-content y align-items.

Centrado completo con Flexbox

Para centrar completamente un elemento tanto horizontal como verticalmente en su contenedor, puedes utilizar una combinación de justify-content y align-items. Aquí tienes un ejemplo:

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Flexbox Completo</title>
<style>
.contenedor {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
height: 100vh; /* Altura de la ventana gráfica para centrar completamente */
}
.contenido {
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class="contenedor">
<p class="contenido">Este texto está completamente centrado usando Flexbox.</p>
</div>
</body>
</html>

En este ejemplo:

  1. display: flex: Convierte el div en un contenedor flex.
  2. justify-content: center: Centra el elemento hijo horizontalmente.
  3. align-items: center: Centra el elemento hijo verticalmente.
  4. height: 100vh: Establece la altura del contenedor al 100% de la altura de la ventana gráfica, garantizando el centrado completo.

Flexbox proporciona una solución flexible y potente para el diseño y alineación de elementos, y es una herramienta esencial para cualquier desarrollador web. Con Flexbox, puedes lograr diseños complejos y responsivos con un mínimo de esfuerzo y código.

Centrado con CSS Grid

CSS Grid  permite un control preciso sobre el diseño y posicionamiento de elementos en una página web. Al igual que Flexbox, CSS Grid facilita la creación de diseños complejos y responsivos. CSS Grid es especialmente útil para definir la estructura de la página con filas y columnas, permitiendo un control detallado sobre la ubicación de cada elemento.

Principios de CSS Grid

CSS Grid establece un contenedor grid (display: grid) que convierte sus elementos hijos en elementos grid. Dentro de este contenedor, varias propiedades se pueden aplicar para posicionar y alinear los elementos de manera precisa.

Propiedades clave

  1. display: grid: Convierte un contenedor en un contenedor grid, haciendo que sus elementos hijos se alineen según las reglas de CSS Grid.
  2. justify-items: Controla la alineación de los elementos hijos a lo largo del eje horizontal.
    • center: Centra los elementos hijos horizontalmente dentro de cada celda del grid.
  3. align-items: Controla la alineación de los elementos hijos a lo largo del eje vertical (opcional).

Ejemplo

Para entender cómo utilizar CSS Grid para centrar texto horizontalmente, veamos un ejemplo práctico:

HTML

<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Ejemplo de CSS Grid</title>
<style>
.contenedor {
display: grid;
justify-items: center;
border: 1px solid #000;
height: 200px;
align-items: center; /* Añadido para centrar verticalmente también */
}
.contenido {
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class=»contenedor»>
<p class=»contenido»>Este texto está centrado horizontal y verticalmente usando CSS Grid.</p>
</div>
</body>
</html>

En este ejemplo tenemos un documento HTML con un div que tiene la clase contenedor.  Dentro del div, hay un párrafo (p) con la clase contenido.

CSS Aplicado:

  • .contenedor: Esta clase se aplica al div principal. Las reglas CSS incluyen:
  • display: grid;: Convierte el div en un contenedor grid.
  • justify-items: center;: Centra los elementos hijos horizontalmente dentro de cada celda del grid.
  • border: 1px solid #000;: Añade un borde para mejorar la presentación visual.
  • height: 200px;: Establece una altura fija para el div, permitiendo una demostración clara del centrado vertical.
  • align-items: center;: (opcional) Centra los elementos hijos verticalmente dentro del contenedor.
  • .contenido: Esta clase se aplica al párrafo para darle estilo, con un tamaño de fuente mayor y un color de texto específico.

Consideraciones adicionales

  • Eje Principal y Transversal: En CSS Grid, las propiedades justify-items y align-items controlan la alineación a lo largo de los ejes horizontal y vertical, respectivamente.
  • Compatibilidad: CSS Grid es compatible con todos los navegadores modernos, pero los desarrolladores deben asegurarse de que los usuarios con navegadores más antiguos aún tengan una experiencia aceptable.
  • Control Detallado: CSS Grid ofrece un control más detallado sobre el diseño en comparación con Flexbox, especialmente cuando se trabaja con estructuras de múltiples filas y columnas.

Centrado completo con CSS Grid

Para centrar completamente un elemento tanto horizontal como verticalmente en su contenedor, puedes utilizar una combinación de justify-items y align-items. Aquí tienes un ejemplo:

HTML
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Ejemplo de CSS Grid Completo</title>
<style>
.contenedor {
display: grid;
justify-items: center;
align-items: center;
border: 1px solid #000;
height: 100vh; /* Altura de la ventana gráfica para centrar completamente */
}
.contenido {
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class=»contenedor»>
<p class=»contenido»>Este texto está completamente centrado usando CSS Grid.</p>
</div>
</body>
</html>

CSS aplicado

  • display: grid: Convierte el div en un contenedor grid.
  • justify-items: center: Centra el elemento hijo horizontalmente dentro de su celda.
  • align-items: center: Centra el elemento hijo verticalmente dentro de su celda.
  • height: 100vh: Establece la altura del contenedor al 100% de la altura de la ventana gráfica, garantizando el centrado completo.

CSS Grid proporciona una solución robusta y flexible para el diseño y alineación de elementos, permitiéndonos crear layouts complejos y responsivos con un control detallado sobre la posición de cada elemento en la página. Con CSS Grid, puedes lograr un diseño preciso y eficiente, adecuado para una amplia variedad de necesidades de diseño web.

Reflexiones finales

Centrar texto y elementos en una página web es una habilidad esencial para cualquier diseñador o desarrollador web. A lo largo de este artículo, hemos explorado diversas técnicas de CSS para lograr este objetivo, desde los métodos más simples como text-align y margin: auto, hasta las soluciones más avanzadas como Flexbox y CSS Grid.

Cada una de estas técnicas tiene sus propias ventajas y limitaciones, y la elección de la más adecuada dependerá del contexto específico de diseño y de los elementos que se estén alineando. Por ejemplo, text-align es perfecto para centrar texto con CSS  dentro de un contenedor de bloque, mientras que margin: auto es ideal para centrar elementos de bloque con un ancho definido. Flexbox y CSS Grid, por su parte, ofrecen una mayor flexibilidad y control, permitiendo no solo el centrado horizontal sino también el vertical, y adaptándose fácilmente a los diseños responsivos.

Sé la primera persona en dejar un comentario.

¿Tienes alguna pregunta o respuesta?