title: Vertically center a fluid image in a fluid container
body: <p>I certainly do not want to add to the pile of vertical alignments CSS questions, but I've spent hours trying to find a solution to no avail yet. Here's the situation:</p>
  
  <p>I am building a slideshow gallery of images. I want the images to be displayed as large as the user's window allows. So I have this outer placeholder:</p>
  
  <pre><code>&lt;section class="photo full"&gt;
  </code></pre>
  
  <p>(Yes, I'm using HTML5 elements). Which has the following CSS:</p>
  
  <pre><code>section.photo.full { 
      display:inline-block;
      width:100%; 
      height:100%; 
      position:absolute;
      overflow:hidden; 
      text-align:center;
  }
  </code></pre>
  
  <p>Next, the image is placed inside it. Depending on the orientation of the image, I set either the width or height to 75%, and the other axis to auto:</p>
  
  <pre><code>$wide = $bigimage['width'] &gt;= $bigimage['height'] ? true: false; ?&gt;
  &lt;img src="&lt;?= $bigimage['url'] ?&gt;" width="&lt;?= $wide? "75%" : "auto"?&gt;" height="&lt;?= $wide? "auto" : "75%"?&gt;"/&gt;
  </code></pre>
  
  <p>So, we have a fluid outer container, with inside a fluid image. The horizontal centering of the image works, yet I cannot seem to find a way to vertically center the image within it's container. I have researched centering methods but most assume either the container or image has a known width or height. Then there is the display:table-cell method, which does not seem to work for me either. </p>
  
  <p>I'm stuck. I'm looking for a CSS solution, but am open to js solutions too.</p>