How to centralise images with an absolute position?

Question

I have three images in a <div>. I want the images to overlay each other (for a slideshow using opacity) and remain central on my website.

To make the images overlay I set their position to absolute (position: absolute;). However, this conflicts with my method of centralising my images. To make my images central, I give images the following properties: margin: 0 auto; display: block; This doesn't work when the images' positions are set to absolute. What other methods can I use to make my images overlay and/or centralise images.

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

score 1 · Answer 1 · answered Aug 07 '15 at 18:08

1

See the fiddle

To centralize absolutely positioned items, use

left:0;
right:0;

along with margin:0 auto;

answered Aug 07 '15 at 18:08

Lal

14,726
4
45
70

score 1 · Answer 2 · answered Aug 07 '15 at 18:08

In addition to setting automatic margins and absolute positioning, you also need to set all the offsets (top/left/etc) to 0. This method should work as long as you have a declared height:

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

(source)

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Another option is by using CSS3 transform:

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

Add vendor prefixes as needed.

This has also been mentioned in an answer under the question Center an image with CSS (horizontal and vertical).

edited May 23 '17 at 11:43

Community

1
1

answered Aug 07 '15 at 18:15

Sebastian Simon

18,263
7
55
75

How to centralise images with an absolute position?

3 Answers3

See the fiddle