En la publicación de hoy te traigo una pequeña guía sobre cómo centrar una imagen en HTML en cualquier situación en la que te encuentres. Esta entrada será una guía rápida y directa al grano. ¡Comenzamos!
Antes de comenzar, recordemos cómo es el código para agregar una imagen HTML a una web:
<img src="/carpeta-imagenes/tu-imagen.jpg">Ahora que ya tienes el código necesario para agregar la imagen a tu página web, vamos a ver las diferentes formas existentes para centrar una imagen en tu web, ya sea horizontalmente, o verticalmente.
Índice de contenidos
Podrás centrar una imagen en una página web tan solo añadiendo unas cuentas reglas CSS. Te muestro un par de formas a continuación.
Verás en el siguiente ejemplo que hay una clase CSS que he llamado «.centrar». En este selector de clase he agregado las propiedades margin-right: auto y margin-left: auto. Con ello logro que la imagen tenga un margen automático en el eje horizontal, es decir, hacia izquierda y derecha de la imagen. Como nota, si la propiedad hubiera sido simplemente margin: auto también hubiera funcionado, solo que en este caso, el margen sería sobre los dos ejes (horizontal y vertical), aunque en el vertical no se apreciaría por falta de «altura» en su contenedor padre.
See the Pen Untitled by Alberto (@carontestudio) on CodePen.
Gracias al uso de Flexbox podrás centrar una imagen en una web de una forma realmente sencilla. Tan solo hay que entender cómo funciona Flexbox, y conocer las propiedades CSS asociadas al mismo. Si quieres saber más acerca de esto, puedes formarte con nuestros cursos de diseño web.
A continuación te dejo el código necesario usando Flexbox. En el código verás que he eliminado la clase de la imagen, y que en este caso, he creado una clase llamada «padre». En ella, he aplicado los atributos display: flex y justify-content: center
Simplemente agregando estas clases al contenedor padre del elemento que quieras centrar, lo harás.
See the Pen Centrar imagen HTML con Flex by Alberto (@carontestudio) on CodePen.
En muchas ocasiones, puedes necesitar centrar verticalmente una imagen en tu maquetación web. El código para hacerlo es realmente sencillo. A continuación te muestro cómo puedes hacerlo.
See the Pen Centrar imagen HTML verticalmente con Flexbox by Alberto (@carontestudio) on CodePen.
En este código, verás que al <body> le he aplicado una altura definida de 500px. Posteriormente, a la div con clase «padre» le he dicho que «mida» el 100% de su contenedor padre. Por lo tanto, este <div> también medirá 500px, ya que es lo que mide su «padre», es decir, la etiqueta <body>. Por último, al <div> con clase «padre» le he agregado las propiedades display: flex y align-items: center
Existen varias formas para centrar una imagen en tu página web. Las más comunes son usando Flexbox como hemos visto anteriormente, y usando la propiedad CSS translate y transform
Vamos a usar un ejemplo similar a los vistos anteriormente, solo que en esta ocasión usaremos Flexbox. El código es el siguiente:
See the Pen Centrar imagen HTML en el centro de la pantalla con Flexbox by Alberto (@carontestudio) on CodePen.
En esta ocasión, te muestro el código que puedes utilizar para centrar una imagen usando posiciones absolutas y relativas, y las propiedades CSS Translate y Transform.
El código es el siguiente:
See the Pen Centrar imagen HTML en el centro de la pantalla con Flexbox by Alberto (@carontestudio) on CodePen.
Cómo has podido comprobar, centrar horizontal y verticalmente una imagen en código HTML es realmente sencillo. Aquí te he dejado las formas correctas de hacerlo.
Cuéntame en comentarios si te han sido de utilidad estos códigos, que espero que si 😉
¡Hasta la próxima!
En este artículo aprenderás sobre como comenzó el diseño gráfico y sus primeros años a… Leer más
Desde hace unas semanas, los rumores eran cada vez más fuertes, y ahora ya es… Leer más
El entorno B2B (Business to Business) en España vive una etapa de profunda transformación impulsada… Leer más
Qué es el SEO y por qué es importante para tu empresa. En este artículo… Leer más
El 13 de marzo de 2025, Google anunció el despliegue de su primera actualización central… Leer más
La migración SEO es una operación crítica para una web que fácilmente se puede convertir… Leer más
Ver comentarios
Muy claros los ejemplos y alternativas. Muchas gracias. Saludos cordiales.
Gracias a ti por leernos