Centering an image with CSS position absolute - html

Question

I have an 3 images inside a div and that div is inside another div...like so
<div class="contentImages">
<div id="slideshow">
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image2'] ?>" height="200" />
<img src="upload/<?php echo $array['image3'] ?>" height="200" />
</div>
</div>
if you goto http://www.willruppelglass.com/ you can see that its a slideshow and the images are not centered inside the div and it looks horrible...
(my original plan was to have the images attaching, but I am not sure if that is possible...is it?)
Here is the CSS for the slideshow
#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow, #slideshow2, #slideshow3 {
overflow:hidden;
float:left;
width:250px;
}
and the CSS for content Images
.contentImages{
border:1px solid #CCC;
padding:10px;
margin:20px auto 0;
position:relative;
width:750px;
overflow:hidden;
}
I hope this makes sense, this issue has been bugging me for days,

Answer 1

Here's a page for you: http://www.w3.org/Style/Examples/007/center
Also, I suggest you make thumbnails of the images. It takes a painfully long time to load them, and the slideshow switches multiple times before all images is loaded.