When testing this it doesn't work when images are different sizes, and they still stack up on one another
–
Ryan GibbonsDec 14 '11 at 18:57

1

Too hack-ish (as it almost always turns out with css). But awesome! :-)
–
Dr.KameleonDec 7 '13 at 9:35

I was tempted by the cleverness of some other answers, but only this one was reliable for me.
–
Chris SchiffhauerApr 2 '14 at 1:02

I had the same issue like Ryan, so I tried the second answer suggested by "baaroz" and it worked for me!!! and it support different resolutions also, since my main DIV have width in % and not PX
–
UIDApr 11 '14 at 19:05

.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}

Explanation

Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.

This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).

An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says

Your images are not centered because your list items are not centered; only their text is centered. You can achieve the positioning you want by either centering the entire list or centering the images within the list.

A revised version of your code can be found at the bottom. In my revision I center both the list and the images within it.

The truth is you cannot center an element that has a position set to absolute.

But this behavior can be imitated!

Note: These instructions will work with any DOM block element, not just img.

What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so: