Vertical aligning an absolute positioned div inside a containing div

Question

I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.

I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS

HTML:

<div id="projects">
  <div class="gallery">
     <span class="span1">&#9668;</span><span class="span2">&#9658;</span>
        <div class="slideshow">
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
        </div>
  </div>
</div>

CSS:

#main #home-column-2 #projects
{
  width: 330px;
  background: #fefff5;
  height: 405px;
  padding: 12px;
}

#main #home-column-2 #projects .gallery
{
  width: 328px;
  height: 363px;
  position: relative;
  background: url('images/bg-home-gallery.jpg');
}

#main #home-column-2 #projects .gallery img
{
  position: relative;
  z-index: 10;
}

And in case you want to see it, the jQuery:

$('#home-column-2 #projects .gallery .slideshow').cycle(
{
   fx: 'scrollHorz',
   timeout: 0,
   next: "#home-column-2 #projects .gallery span.span2",
   prev: "#home-column-2 #projects .gallery span.span1"
});

Any ideas on getting these images to center?

Answer 1

The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?

Another option is to align them manually in javascript based on the containing div's height.

Answer 2

Try this:

http://www.brunildo.org/test/img_center.html

Vertical centering is a pain! Here's what the W3C page says about the vertical center:

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.