I usually work in flash and it’s pretty straight forward to center the content area (horizontal and vertical) for the browser, so I though I’d have a go and try and workout how to do the same with CSS, bare in mind the following CSS is pretty basic but I think it could have a lot of use for sites that only have minimal content and want the page in the center.
So far as I can gather you could only apply this if you know the width and height of the area or have it at set size, in this case I’ve set this for 800 pixels x 600 pixels
heres the css
Code:
#wrapper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#inner{
background-color:#000000;
position: absolute;
height: 600px;
width: 800px;
margin-top: -300px;
top: 50%;
margin-right: -400px;
right:50%;
}
and heres the html the css is imported to
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="center.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><div id="inner"></div>
</div>
</body>
</html>
and heres the result
and here it is in use as a landing page for a flash site im currently working on
hope that is of use to someone
Manny2k
Bookmarks