title: Vertically center content within a div of dynamic height
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/8159542/vertically-center-html-element-within-a-div-of-dynamic-height">Vertically Center HTML Element Within a Div of Dynamic Height</a>  </p>
  </blockquote>
  
  
  
  <p>I am currently designing a website for which i need to vertically center some content. The design is pretty basic: a fixed height header (left-aligned and always at the top of the page), and underneath that vertically centered images in a horizontal row (yes, horizontal scrolling, i know).</p>
  
  <p>Ideally i would want the vertical centering of the images to be based on the 100% height of the viewport - the header (so a dynamic height that prevents the content from overlapping the header). </p>
  
  <p>An example of the website can be found on <a href="http://bit.ly/vl1XNY" rel="nofollow noreferrer">http://bit.ly/vl1XNY</a>, which is currently using tables for layout. The css and html i used can be found there too (of course).</p>
  
  <p>I am aware of various solutions for centering content vertically within a container of fixed height, however none of them have worked for me because i'm using variable height and do not want to use absolute positioning (to prevent overlap). I have looked around and tried the table-cell solution, the line-height one, and the absolute positioning one.</p>
  
  <p>So far the only solution that has worked exactly as i intended was using tables. But i would like to refrain from using them. Is anyone aware of a valid css and html solution for this problem? Or at least a more graceful solution?</p>