Vertically center content within a div of dynamic height [duplicate] - css

Question

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Vertically Center HTML Element Within a Div of Dynamic Height
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).
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).
An example of the website can be found on http://bit.ly/vl1XNY, which is currently using tables for layout. The css and html i used can be found there too (of course).
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.
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?

Answer 1

Wohh, talk about timing, i was looking for such a solution just a few minutes ago and stumbled upon an article on this subject exactly, you can read it all about it here: Centering in the Unknown.
You can easily modify your code to make it work like so:
CSS
#wrapper {
background: none repeat scroll 0 0 blue;
height: 100%;
text-align: center;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
padding: 10px 15px;
vertical-align: middle;
width: 460px;
}
HTML
<div id="wrapper">
<div class="center">
<img src="images/a_1.jpg" alt=" ">
</div>
<div class="center">
<img src="images/a_2.jpg" alt=" ">
</div>
</div>

Answer 2

You can try the following code:
<div style="display:table-cell;">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
Please check the above code in the context of all HTML:
<style type="text/css">
html, body {height:100%;}
body {
margin:0; padding:0;
}
#header {
height:1.7em;
}
#content {
display:table-cell; vertical-align:middle; height:500px;
}
</style>
<div id="header"></div>
<div id="content">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
This will only work with a fixed height table-cell, which can be achieved by calculating current viewport height with javascript