Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto;
to it to center. Finally put display:block
on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}