如何居中图像, 绝对定位, 在一个 div 内

想法是焦点内 DIV, 与图像 绝对定位 { 位置: 绝对; }. 要做到这一点, 首先是分配, 到 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>

和, 然后, 结果: