moudy/vertical_div_align.html

## vertical_div_align.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html,body{
        height:100%;
        margin:0;
        padding:0;}
      #offset{
        width:100%;
        height:50%;
        margin-top:-250px; /* half of content height*/
        float:left;}
      #page {
        width:700px;
        height:500px;
        margin:0 auto;
        border:1px solid #444;
        overflow:auto; /* allow scrolling in element */
        clear:both;}
    </style>
  </head>
  <body>
    <div id="offset"></div> <!--invisible, causes following div to be vertically centered-->
    <div id="page">
      <!--content here-->
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html,body{
	height:100%;
	margin:0;
	padding:0;}
	#offset{
	width:100%;
	height:50%;
	margin-top:-250px; /* half of content height*/
	float:left;}
	#page {
	width:700px;
	height:500px;
	margin:0 auto;
	border:1px solid #444;
	overflow:auto; /* allow scrolling in element */
	clear:both;}
	</style>
	</head>
	<body>
	<div id="offset"></div> <!--invisible, causes following div to be vertically centered-->
	<div id="page">
	<!--content here-->
	</div>
	</body>
	</html>