css centering horizontal and vertical

**manny2k** · 29 July 2007, 10:05 AM

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

Thread: css centering horizontal and vertical

Thread Tools

Display

Threaded View

css centering horizontal and vertical

Bookmarks

Bookmarks

Posting Permissions