To center vertically a content, you have to use the
following CSS code
div.vCenterWrapper
{
height: 100%;
display: table;
overflow: hidden;
}
div.vCenterContainer
{
display: table-cell;
vertical-align: middle;
}
div.vCenterContent
{
}
and the following HTML code
<div class="vCenterWrapper">
<div class="vCenterContainer">
<div class="vCenterContent">
...
</div>
</div>
</div>
Unfortunately the CSS code doesn't work with Internet Explorer versions prior
to the 8: you have to add the following conditional code
<style type="text/css">
div.vCenterWrapper
{
position: relative;
}
div.vCenterContainer
{
position: absolute;
top: 50%;
}
div.vCenterContent
{
position: relative;
top: -50%;
}
</style>
If you want to center horizontally too, the temptation would be to use the
text centering:
<div class="vCenterWrapper" style="text-align:center;">
<div class="vCenterContainer">
<div class="vCenterContent">
...
</div>
</div>
</div>
Unfortunately this method works with all browsers, but not with Internet Explorer
6 and Internet Explorer 7.
The correct way to do it, to center for example a 500 pixels column, is to
modify the styles:
div.vCenterWrapper
{
height: 100%;
width: 500px;
display: table;
overflow: hidden;
}
div.vCenterContainer
{
display: table-cell;
vertical-align: middle;
}
div.vCenterContent
{
width: 500px;
margin-left: auto;
margin-right: auto;
text-align:center;
}