<html>
<head>
<title>DIV CENTER SCREEN</title>
<style type="text/css">
<!--
html, body
{
font-family: Arial, Helvetica, Sans-Serif;
padding:0;
margin: 0;
text-align:center;
height: 100%;
}
div#shim
{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -275px;
float: left;
}
div#wrapper
{
width: 650px;
height: 550px;
margin:0px auto;
text-align:left;
clear: both;
top: -275px;
position: static;
background-color: #7B9EbD;
text-align: center;
}
p
{
line-height: 550px;
font-weight: bold;
font-size: 16pt;
}
-->
</style>
</head>
<body>
<div id="shim"></div>
<div id="wrapper">
<p>
This div is in the center of the screen...
</p>
</div>
</body>
</html>
The trick is to put another div above the one you need centered, put it 50% height and a margin-top equal to half your centered div height. then put your centered div with a top of half it's height.
No comments:
Post a Comment