Cómo Centrar en CSS Cualquier Elemento

Una tarea común para cualquier desarrollador web que utilice CSS es centrar texto o imágenes. En este artículo explicaré de forma detallada como centrar distintos tipos de elementos con CSS.

Podemos diferenciar entre tres casos distintos:

1. Centrar horizontalmente líneas de texto
2. Centrar horizontalmente un bloque de texto o una imagen
3. Centrar verticalmente un bloque o una imagen

A continuación veremos cómo solucionar cada caso.

Centrar horizontalmente líneas de texto

El caso más típico y más fácil de implementar es el de querer centrar una o varias líneas de texto, ya sea en un párrafo (etiqueta p), una etiqueta (etiqueta span) o en un encabezado (etiquetas h1, h2, h3…).

Utilizaremos la propiedad “text-align” de CSS que está pensada para eso:

p {
  text-align: center;
}

Las líneas de este párrafo están todas centradas entre los márgenes del párrafo, gracias al valor “center” de la propiedad “text-align”.

Este método sirve también para alinear cualquier otro elemento que esté dentro del párrafo, siempre y cuando se muestre como un “bloque en línea”.

Centrar horizontalmente un bloque de texto o una imagen

Para centrar horizontalmente cualquier otro elemento de tipo “bloque” como puede ser un elemento div, basta con poner los márgenes laterales en modo automático:

div {
  margin-left: auto;
  margin-right: auto;
}

Si queremos centrar una imagen debemos especificar que la muestre como un bloque ya que las imágenes, por defecto, tienen un display: inline-block implícito. Esto lo podemos hacer utilizando el atributo “display” con el valor “block”:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Centrar verticalmente un bloque de texto o una imagen

Para centrar verticalmente un elemento debemos tomar una aproximación distinta. En este caso debemos aplicar un par de propiedades CSS al contenedor que contiene los elementos que queremos centrar:

#contenedor {
    display: table-cell;
    vertical-align: middle;
}

Si te ha resultado útil este artículo recuerda darle a “Me gusta” y compartirlo en tus redes.

Y si quieres aprender más cosas sobre CSS y diseño web creativo puedes suscribirte a mi canal de Youtube.