Quote:http://www.wpdfd.com/editorial/thebox/deadcentre4.html
This is the link - view source and css files.
Step one: Include the following CSS in your page.
Code:
<style type="text/css" media="screen"><!--
body
{
margin: 0px
}
#horizon
{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
--></style>
</head>
Step Two: Include the following code in the Body of your page.
Code:
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is the dead center.
</div>
</div>
</div>
Replace This text is the dead center with whatever you want aligned to the vertical center.