Centrar imagen vertical y horizontalmente con CSS

En este artículo vas a descubrir una forma rápida y sencilla de centrar una imagen o contenido tanto vertical como horizontalmente dentro de un contenedor padre o div utilizando únicamente reglas de estilo CSS.

Aparentemente, parece una tarea sencilla pero tiene un poco más de complejidad de lo que parece.

Buscando soluciones en Internet se encuentran muchas divagaciones y ejemplos interminables que no acaban de satisfacer esta sencilla necesidad en todos los navegadores.

Por ese motivo, me he sentado a escribir para facilitarte un poco la vida ofreciéndote una rápida y efectiva solución.

La primera idea es usar el atributo «vertical-align», pero esta solución sólo es válida para alinear la imagen con el texto adyacente.

Si definimos el atributo «line-height» para el contenedor padre igual a su altura, centramos el contenido horizontalmente con text-align:center; y, finalmente, centramos la imagen verticalmente, ya tendríamos una solución sencilla y aceptable.

A nivel técnico, en la hoja de estilos CSS agrega algo como lo siguiente:

.content {
	width:600px;
	height:400px;
	line-height:400px;
	margin:0px auto;
	text-align:center;
	background-color:#CCCCCC;
}
 
.content img {
	vertical-align:middle;
}

Y en el cuerpo de la página o más bien dentro de la etiqueta <body> agrega el siguiente código HTML con contiene la imagen a centrar:

<div class="content">
    <img src="tu-imagen.png" width="50px" height="50px" />
</div>

Y ya lo tienes! Consigues un resultado como la siguiente imagen:

Centrar una imagen con CSS

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(15 votos, promedio: 5 de 5)
Comparte en las redes sociales

12 respuestas a “Centrar imagen vertical y horizontalmente con CSS”

  1. Jose dice:

    Buen aporte, pero también se podría haber realizado con flex.

  2. iva dice:

    necesito que las imagenes del blog sean verticales todas, como lo logro?

  3. Ignacio dice:

    hola! estoy creando mi pagina web para colocar mis Beat tapes, discos y todo eso, pero tengo un problema y es que no logro cuadrar las imagenes, la idea es que queden todas en «la misma linea» les dejo una imagen de lo que sucede y espero me puedan ayudar.

    https://mega.nz/#!RYFVzTyS!BgBRC34w7eYMXeJIFMn52oK3C2Cnr3dHPdrxNuBZU3E

  4. Daniel dice:

    Este vídeo me sirvió para centrar el logo, hay masen el canal depronto les sirven.

    https://www.youtube.com/channel/UCR93GcZvHiC8zrCnSfbE5vw

  5. Jesus dice:

    Funciona perfectamente…. muy bien explicado
    Saludos

  6. Aridio dice:

    Excelente truco, siempre estuve buscando algo así, peor mejor aún, hice un mixin en less que me ayuda a implementar mejor y más fácilmente este trugo, gracias :3

  7. Gerardo dice:

    Hola, estoy montando una tienda con prestashop, estoy leyendo tu articulo pero no entiendo en que archivo css deberia incorporarlo, products.css , products_list.css ??

    te agradeceria si me lo pudieras indicar, la idea es que quede tanto texto como imagen centrado en cada celda, igual que http://www.parafarmaciamimaos.com/clon/

    un millon de gracias anticipadas, y feliz año 2014

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre