Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto.

Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div).

The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div.

This will work fine in any current standards compatible browser. It also works in Internet Explorer versions 5 and up (but good luck in getting any half complicated site working properly in IE5...).

Center web page example

This solution is very simple to implement, and requires only a few lines of code.

The HTML

centre webpage html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>center web page example</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
	<div id="container">

		YOUR WEBSITE CODE IN HERE :)

	</div>
</body>
</html>

The CSS

css code

/* set the width of container to match the width of your own website */
#container{
margin:0 auto;
width:300px;
}

Good luck with your own coding! This simple example will be enough to get you started.

We've made this available for download. Download center-web-page.zip

Comments

There are no comments for this post

Center a web page in CSS

Related resources

Other articles

The HTML

The CSS

Comments

Leave a comment