Center a dynamic width div inside a fixed width div

Question

I have quite a bit of experience with css and even this problem has stumped me.

I am theme-ing the NextGen gallery plugin for Wordpress, which means I don't really have control over the HTML, and I have a problem trying to line up the images.

In NextGen the maximum size of images is 200px x 200px. The images are thumbnails of larger images, each with its own constraints in size and dimension but all under 200px x 200px

The main aim:
The class image is fixed width but its width changes depending on the image that is within it. The class imageBox surrounds images and has its width fixed to the maximum width of images (200px wide, 200px high). For the images that are not 200px wide I want them to line up in the center of the imageBox.

The basic HTML generated by NextGen Gallery:

<div class="imageBox">
   <div class="image">
      <img />
   </div>
</div>

My CSS so far:

.imageBox{
    width: 218px;
    height: 218px;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.image{
    margin-right: 5px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    display: inline-block;
}

I have used absolute positioning to ensure the images are all lined up along their bottom edge, thus the bottom:0px.

Any help would be great.

EDIT Messed up the css, had the classes the wrong way round.

Answer 1

Try this:

.image{
    width: 218px;
    height: 218px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
 }