Professional and Affordable Web Design

0800 080 5401

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 exampleCenter 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

Share ThisPosted: 02 July 2009

Comments3 Comments

Matt

Ive been looking for an alterative to wrapping my site in a div tag with align set to center.. Thanks alot guys :)

08 April 2010

eddie

half works after 2 mins to install - just need to fiddle around now I think. MANY THANKS !

03 June 2010

Jonathan

Or you can simply do the same with the body: body { margin: 0 auto; } And there is then no need for a container div, and background images can be applied to the html element.

20 August 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Screenshot of storageking.co.uk website
storageking.co.uk

We are proud to have produced the website for Storage King, and their associated depot sites throughout the UK. For this, we kept the basic...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

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... Read More »