La idea es centrar dentro de un DIV, una imagen con posicionamiento absoluto { position: absolute; }. Para ello, lo primero de todo es asignar, al div que va a contener la imagen, un posicionamiento relativo, evitando así que el posicionamiento absoluto de la imagen sea con respecto al elemento contenedor padre que tenga posicionamiento relativo más próximo, o en su defecto, al body.
Suponiendo que tenemos el siguiente código con un div y una imagen dentro del mismo:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
El estilo a aplicar al contenedor y a la imagen es el siguiente:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
Para ver el resultado con algo de ejemplo, vamos a modificar el código del HTML asignando un borde y un tamaño al div, así como agregando una ruta y un tamaño a la imagen. Quedaría algo así:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
y, a continuación, el resultado: