<!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>Vertically and Horizontally Centering a DIV</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/mint/mint.js.php"></script>
<style type="text/css">
body {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
color: #333;
}
p {
margin: 1em;
}
.comments {
background-color: #e3e3e3;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 2px;
}
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">
<p>This is a vertically and horizontally centered <div> tag. Try resizing your browser.</p>
<div class="comments">
<p><strong>Comments:</strong></p>
<p>Tested in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN4.7, NN7, and Mozilla 1.2.</span><br />
Works in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN7, and Mozilla 1.2.</span><br />
Doesn't work in: <span style="color: darkblue">NN4.7</span></p>
<p>© Copyright 2003, <a href="/">Infinity Web Design</a></p>
</div>
</div>
</body>
</html>
