Vertically and Horizontally Centered Div Tutorial

View Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Div</title>
<style type="text/css">
body {
height:100%; 
margin:0; 
padding:0;
}
h1 {
font-size:1.2em;
margin:20px 0 0;
font-family:Arial;
text-align:center;
}
#centereddiv {
position:absolute; 
height:50%; 
width:50%;
left:25%; 
top:25%; 
border:2px solid #000;
background:#CCC;
}
</style> 
</head>
<body>
<div id="centereddiv">
<h1>Vertically and Horizontally Centered Div</h1>  
</div>
</body>
</html>

ADVERTISE HERE