Horizontal centering for an absolutely positioned image

Question

Here is a fiddle with it centered, but the image with position:relative instead of position:absolute.

Here is another fiddle with it positioned absolutely, but not centered.

Note that the image has a variable width.

The reason the image must be centered is because I want to fade one out while another is fading in behind it.

Any ideas? Thanks!

Answer 1

A better solution would be to not use the CSS position property at all.

Try displaying the images as block elements, and tell the browser to use an auto margin on left and right.

#imagesContainer img{
    display:block;
    margin:0 auto;
}

Proof of concept fiddle (border added just so you can see that the image is in fact centered): http://jsfiddle.net/9nkDS/5/