How to center your page with CSS - vertically
October 9th, 2008
This is a lot trickier than the horizontal method, and there is a pretty big catch, your content has to have a fixed height. You can use javascript to center vertically and have a non-fixed height, but I try not to use javascript for something like layout.
If you have a fixed height item, and you move it have way down the page, and then move it back up half of it’s height, you get a perfectly centered item.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Your Page Title</title>
<link rel=”stylesheet” href=”styles/default.css” type=”text/css” media=”screen” charset=”utf-8″>
</head>
<body>
<div id=”wrapper”>
your page content
</div><!–end wrapper–>
</body>
</html>
CSS
body {padding: 0; margin: 0; background: #369;}
#wrapper {width: 800px; height: 500px; position: absolute; left: 50%; top: 50%; margin-top: -250px; margin-left: -400px; background: #fff;}
That’s all you need. If you have a fixed height design, then it works great.
Tags: CSS, vertical centering
This entry was posted on Thursday, October 9th, 2008 at 7:52 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
fxrocker Says:
Leave a Reply