How to centre a page with CSS

Web programming topics
Post Reply
User avatar
Neo
Site Admin
Site Admin
Posts: 2642
Joined: Wed Jul 15, 2009 2:07 am
Location: Colombo

How to centre a page with CSS

Post by Neo » Mon Mar 01, 2010 1:16 am

When designing the layout of a web page, it is common to want to center the entire page. Luckily, this is very easy to do without breaking standards. All you have to do is wrap the entire page with a div with the left and right margins set to auto (margin: 0px auto;).

Here is an example:

Code: Select all

<html>
<body>
<div class="wrapper">Contents of page...</div>
</body>
</html> 

Code: Select all

.wrapper {
   margin: 0px auto;
   width: 600px;
} 
Here, margin specifies the top/bottom and the left/right respectively.

That's all there is to it!
Post Reply

Return to “Web programming”