Vertical align

[MattR]

Don't now how much time I've spent Googling and trying stuff but I just can't get this to work and it's infuriating me. All I want is to have text in a div vertically aligned.

 

#message2-box {
position: absolute;
left: 0;
width: 1024px;
height: 300px;
top: -144px;
background: #c0c0c0;
border-top: 2px #000000 solid;
border-bottom: 2px #000000 solid;
opacity: 1;
vertical-align: middle;
display: table;
margin-top: auto;
margin-bottom: auto;
}

#message2-text {
font-family: "Trebuchet MS";
font-size: 1024px;
text-align: center;
color: #000000;
position: absolute;
left: 0;
width: 1024px;
vertical-align: middle;
display: table-cell;
height: 300px;
margin-top: auto;
margin-bottom: auto;
}

#horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: invisible;
display: block;
vertical-align: middle;
}

 

And neither this:

 

<div id="horizon"><div id="message2-box" style="z-index: 3;"><div id="message2-text" style="z-index: 4;">Text here.</div></div></div>

 

or this:

 

<div id="horizon"><div id="message2-box" style="z-index: 3;"><table style="width: 100%; height: 300px;"><tr><td id="message2-text" width="100%" height="300px" align="center" valign="middle"><div style="z-index: 4;">Text here.</div></td></tr></table></div></div>

 

align it vertically. Why??

 

Edit: Doesn't like the position: absolute; in the #message2-text class.

 

I love how I always find the solution within minutes of asking for help. Such is life.