I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some negative values inside of the #container but that sort of worked. I know CSS isn't supporting this yet?
Here is my markup:
body
{
background: #777; /* gray */
text-align: center;
}
#container
{
margin: 0 auto;
width: 968px;
text-align: left;
}
#toptab
{
background: #f77; /* red */
height: 14px;
width: 968px;
}
#middletab
{
background: #7f7; /* green */
width: 968px;
}
#data
{
width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
padding-left: 10px;
padding-right 10px;
}
#bottomtab
{
background: #77f; /* blue */
height: 14px;
width: 968px;
}
<div id="container">
<div id="toptab"></div>
<div id="middletab">
<div id="data">
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
</div>
</div>
<div id="bottomtab"></div>
</div>
Run the snippet above and click "full page" to see how it currently looks. Basically, it looks great horizontally, but now I need it to also center vertically in the page.
The element that I want to align vertically is the #container div. The effect would force the entire div and all sub divs to not only be horizontally aligned but also vertically. I know this is possible and I know Andy Budd posted such a solution but it doesn't seem to work for me.