如何以绝对位置集中图像？

Question

我在 <div> 中有三张图片。我希望图像相互叠加（对于使用不透明度的幻灯片）并在我的网站上保持中心位置。

为了使图像重叠，我将它们的位置设置为绝对 (position: absolute;)。但是，这与我集中图像的方法相冲突。为了使我的图像居中，我为图像提供了以下属性： margin: 0 auto; display: block; 当图像的位置设置为绝对位置时，这不起作用。我还可以使用哪些其他方法来使图像叠加 and/or 集中图像。

<div>
<img  id="SlideShow1" src="Images\image1.jpg" width="512" height="512">
<img  id="SlideShow2" src="Images\image2.png" width="512" height="512">
<img  id="SlideShow3" src="Images\image3.jpg" width="512" height="512">
</div>


img {
position: absolute;
   margin: 0 auto;
    display: block;
}

Answer 1

见fiddle

要集中绝对定位的项目，请使用

left:0;
right:0;

连同margin:0 auto;

Answer 2

除了设置自动边距和绝对定位外，还需要将所有的偏移量(top/left/etc)设置为0。只要声明了高度，这个方法就应该有效:

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(source)

Answer 3

另一种选择是使用 CSS3 transform:

img{
  display:block;
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
}

根据需要添加供应商前缀。

这个问题Center an image with CSS (horizontal and vertical)下的回答也提到了。

如何以绝对位置集中图像？

How to centralise images with an absolute position?

html

css

image

centralized

见fiddle