Question

CSS 一张图片如何在另一张图片上面居中？？？

<img src="1.jpg">
<img src="2.jpg">
1.jpg是200*200,2.jpg是100*100 ，
如何让2.jpg在1.jpg上面水平和垂直都居中？？
俩必须都是img 标签
说把1.jpg放在div的background，然后把2.jpg放在div里面的就算啦。。。
请问img 的style应该怎么设置啊？？求高人！！！

Answer 1

这种效果单纯的图片不好实现，假设把它们放进一个div的容器里面。
<div>
<img src="1.jpg">

<img class="pos" src="2.jpg">

<div>
CSS代码为：
div{ position: relative; width: 200px; height: 200px; }
img{ display: block; }
.pos{ position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
原理是用到了父元素相对定位时，子元素绝对定位是相对于父元素来定位，设置top和left均为50%，然后偏移宽和高的一半，就可以实现垂直居中的效果。不只对于图片，对于任何元素都能实现此效果。
给img添加display: block;是防止在IE6下图片下方出现空白的BUG。

Answer 2

设置css的z-index就可以实现元素的浮动啦。

不知道客官知不知道，html的dom树，是一种元素流，浏览器会一个个读取元素并且填入页面中显示～所以，将img的元素抽出来，就可以实现重叠啦。

具体实现如下

.imgContainer,.img1,.img2{
    padding:0px;
    margin:0px;
    position:relative;
}

.imgContainer{
    display: block;
    clear:both;
    height:200px;
    width:200px;
}
.img1{
    height:200px;
    width:200px;
}
.img2{
    height:100px;
    width:100px;
    top:50px;
    left:50px;
    z-index:2;
} //z-index实现了将img2浮于所有默认的z-index的元素之上，在用定位确定位置就可以啦～

希望有帮到你喵……

Answer 3

将两张图放置不同的DIV中，将2.jpg浮动，然后用margin放在1.jpg上，或者用（vertical-align:middle）这个参数试试。

Answer 4

很简单用position进行定位就可以了,例子：
<div style="position:relative;width:1600px;height:1200px;">
<img src="http://www.miercn.com/images_2014/logo.jpg" style="position:absolute;left:50%;top:50%;"/>
<img src="https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/pic/item/f7246b600c338744f0c43771530fd9f9d72aa0bd.jpg" width="1600" height="1200"/>
</div>