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

2024-12-17 22:15:53

推荐回答（4个）

回答1：

这种效果单纯的图片不好实现，假设把它们放进一个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。

回答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的元素之上，在用定位确定位置就可以啦～

希望有帮到你喵……

回答3：

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

回答4：

很简单用position进行定位就可以了,例子：