Centrar una imagen horizontal y verticalmente usando CSS

El truco esta en definir un margen negativo igual a la mitad del ancho y alto.

 

Archivo "prueba.html":

<html><head><title>Centrar imagen usando CSS</title>
<head>
<style type="text/css">
#imagen_centrada {
    position:    absolute;
    top:         50%;
    left:        50%;
    width:        640px;
    height:       480px;
    margin-left: -320px;
    margin-top:  -240px;
}
</style>
</head>
<body>
<img id="imagen_centrada" src="foto.jpg" />
</body></html>

Comentarios