title: Vertical aligning an absolute positioned div inside a containing div
body: <p>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.</p>
  
  <p>I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="projects"&gt;
    &lt;div class="gallery"&gt;
       &lt;span class="span1"&gt;&amp;#9668;&lt;/span&gt;&lt;span class="span2"&gt;&amp;#9658;&lt;/span&gt;
          &lt;div class="slideshow"&gt;
            &lt;img src="images/img1.png"  /&gt;
            &lt;img src="images/img1.png"  /&gt;
            &lt;img src="images/img1.png"  /&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>And in case you want to see it, the jQuery:</p>
  
  <pre><code>$('#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"
  });
  </code></pre>
  
  <p>Any ideas on getting these images to center?</p>