Hi there Aaron,
this will center the div as you desire. I have used a button for display puposes.
You, of course, can use whatever means you need to initiate it :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dead Center Div</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #404080;
margin: 0px;
padding:0;
}
#horizon {
background: transparent;
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;
color:#000000;
background: #ffffff;
margin-left: -162px;
position: absolute;
top: -100px;
left: 50%;
width: 324px;
height: 200px;
border:solid 1px #ff00ff;
display: none;
}
.bodytext {
font-size: 14px;
margin-top:70px;
}
.headline {
font-weight: bold;
font-size: 24px
}
button {
background:#ffffff;
color:#000000;
margin:20px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function displayDiv() {
if(document.getElementById("content").style.display=="block") {
document.getElementById("content").style.display="none";
}
else {
document.getElementById("content").style.display="block";
}
}
//]]>
</script>
</head>
<body>
<div><button onclick="displayDiv()">div on / off </button></div>
<div id="horizon">
<div id="content">
<div class="bodytext">
This div is<br />
<span class="headline">DEAD CENTRE</span><br />
and stays there!
</div>
</div>
</div>
</body>
</html>