Πώς να το κέντρο οριζόντια μια εικόνα, με την απόλυτη τοποθέτηση, μέσα σε ένα div

Η ιδέα είναι να εστίαση μέσα σε ένα DIV, μια εικόνα με απόλυτη τοποθέτηση { θέση: απόλυτη; }. Για να γίνει αυτό, πρώτα από όλα είναι αντιστοιχίσετε, για το tag div που περιέχει την εικόνα, μια τοποθέτηση σχετική, εμποδίζοντας έτσι την απόλυτη τοποθέτηση της εικόνας είναι για το γονικό κοντέινερ στοιχείο που έχει σχετική τοποθέτηση επόμενη, ή ελλείψει, να το σώμα.

Υποθέτοντας ότι έχουμε τον ακόλουθο κώδικα με ένα div και την εικόνα της ίδιας:

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

</div>

Το στυλ που εφαρμόζεται για το κοντέινερ και η εικόνα είναι ως εξής:

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

}

Για να δείτε το αποτέλεσμα με μερικά από παράδειγμα, Θα τροποποιήσετε ο κώδικας HTML αντιστοιχίζοντας μια άκρη και ένα μέγεθος να το div, καθώς επίσης και προσθέτοντας ένα διαδρομή και ένα μέγεθος στην εικόνα. Θα δούμε κάτι σαν αυτό:

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

και, στη συνέχεια, το αποτέλεσμα: