Cómo centrar una imagen en HTML

Cómo centrar una imagen en HTML

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. Empezamos por lo más común que es cómo centrar una imagen HTML horizontalmente.

Centrar una imagen en HTML horizontal

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.

Usando un margen horizontal automático

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.

Centrar una imagen HTML con Flex

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 para centrar la imagen en HTML 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 centrarás.

See the Pen Centrar imagen HTML con Flex by Alberto (@carontestudio) on CodePen.

Centrar una imagen en HTML verticalmente

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 centrar una imagen HTML verticalmente.

Centrar imagen HTML verticalmente con FlexBox

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

Con esto, la imagen se centrará siempre verticalmente.

Centrar una imagen HTML en el centro de la pantalla

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

Centrar imagen HTML con Flexbox en el centro de la pantalla

Vamos a usar un ejemplo similar a los vistos anteriormente, solo que en esta ocasión, vamos a unirlos para centrar la imagen HTML tan solo usando 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.

Centrar imagen HTML en centro de la pantalla con propiedad CSS «Transform» y «Translate»

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.

Conclusión

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!

Dejar una respuesta

Tu dirección de correo electrónico no será publicada.

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>