centrar imagen html"Como centrar imagen html ?

Esto me lo han preguntado muchas veces: como hacer para centrar una imagen en vertical y horizontal ? (sin tablas)

Aquí te enseño una técnica infalible para centrar imágenes en los 2 sentidos.

Como centrar imagen HTML

El centrado de imágenes en el eje horizontal es un tanto mas sencillo, simplemente basta con agregar un margen automático a la izquierda y a la derecha.

Pero veamos un ejemplo mas complejo de como centrar imagen html, en en ambos ejes.

Voy a crear un documento HTML con una imagen simple de 580px de ancho por 390px de alto.

Para ello creo primero un documento simple en XHTML o HTML5 (aquí el ejemplo es en XHTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrado de imagen - psdahtmlpasoapaso.com</title>
</head>
<body>
</body>
</html>

Luego agrego dentro del BODY una etiqueta IMG correspondiente a una imagen llamada “foto.jpg” con su ancho y su alto:

<img src="foto.jpg" width="580" height="390" />

 

Y luego trabajamos sobre los estilos CSS dentro del mismo documento.
Para ellos vamos a utilizar el selector de la etiqueta IMG directamente y le vamos a aplicar algunas propiedades.

Primero entonces especificamos su alto y su ancho:

img {
width: 580px;
height: 390px;
}

Luego añadimos márgenes superior e izquierdo, con valores negativos que corresponden a la mitad exacta del alto y ancho de la imagen.

Es decir, el margen izquierdo debe ser la mitad del ancho, y el margen superior debe ser la mitad del algo. Siempre usando valores negativos.

Entonces agregamos los márgenes:

img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
}

Luego debemos posicionar la imagen con valores de 50%.
Para eso usamos la propiedades LEFT y TOP con un valor igual a 50%:

img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
}

Y por ultimo debemos especificar el tipo de posicionamiento del elemento imagen, con un valor absoluto, es decir, que coloque a este elemento por fuera del flujo normal de elementos HTML.

img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
position: absolute;
}


Código completo para centrar imagen html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrado de imagen - psdahtmlpasoapaso.com</title>
<style type="text/css">
img {
width: 580px;
height: 390px;
margin-top: -195px;
margin-left: -290px;
left: 50%;
top: 50%;
position: absolute;
}
</style>
</head>

<body>
<img src="foto.jpg" width="580" height="390" />
</body>
</html>

De esta forma podemos perfectamente centrar imagen html, de forma vertical y horizontal.

Puedes ver y descargar el código de este artículo aquí:

bot_demobot_descargar

 

Si quieres aprender mucho mas sobre técnicas de CSS y HTML, te recomiendo el video-curso completo llamado “PSD a HTML Paso a Paso”:

Video Curso Maquetación Web y Conversión PSD a HTML

Saludos!
Cristian