Come centrare un'immagine orizzontalmente, con posizionamento assoluto, all'interno di un div

L'idea è di messa a fuoco all'interno di un DIV, un'immagine con posizionamento assoluto { posizione: assoluta; }. Per fare questo, prima di tutto è assegnare, al div che conterrà l'immagine, un posizionamento relativa, impedendo così il posizionamento assoluto dell'immagine è per il contenitore padre dell'elemento che ha il posizionamento relativo successivo, o in mancanza, per la corpo.

Supponendo che abbiamo il codice riportato di seguito con un div e immagine all'interno dello stesso:

<div class="contenedor">
   <img class="imagen" src="" />
</div>

</div>

Lo stile applicato al contenitore e l'immagine è come segue:

.contenedor {
   position: relative;
}

.imagen {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   margin:auto;
}

.contenedor {

position: relative;

}

.imagen {

position:absolute;

left:0px;

right:0px;

top:0px;

margin:auto;

}

Per vedere il risultato con alcune delle esempio, Ci accingiamo a modificare il codice HTML assegnando un bordo e un dimensioni al div, oltre ad aggiungere un Itinerario e un dimensioni all'immagine. Sarebbe simile a questo:

<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>

<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>

e, quindi, il risultato: