Teléfono y Whatsapp: 675 18 68 80

Centrar una imagen en HTML a la mitad de la pantalla

Este sencillo ejemplo permite poner de forma provisional en una web una imagen centrada en medio de la página. Hay que tener en cuenta que se si el ancho de la foto es 327 píxeles, el margin-left hay que ponerlo a la mitad y negativo, es decir: -163px. Lo mismo con el alto que en este caso es de 47 píxeles, por lo tanto el margin-top hay que ponerlo en -23px.

centrar la imagen

<!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>Titulo de la web</title>
<style type="text/css">
img {
width: 327px;
height: 47px;
margin-top: -23px;
margin-left: -163px;
left: 50%;
top: 50%;
position: absolute;
}
</style>
</head>
 
<body>
<img src="foto.png" width="327" height="47" />
</body>
</html>