Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » css » Centering sites using CSS

Centering sites using CSS

Center your site using CSS and drop the "center" tag.

Here is the CSS we will use

#wrap {
    width: 760px;
    margin: 0px auto 0px auto; /* top, right, bottom, left */
    padding: 10px;
    border: 1px solid #000;
    background-color: #eee;
}

This is the HTML to use on your site

<div id="wrap">
<!-- YOUR SITE CONTENT GOES HERE -->
</div>

The "wrap" or box will be horizontally centered in the browser. Now in modern browsers you could stop here but we don't want to forget about the others that have a lack of CSS2 support.

A great article addresses this fact so I will link you to that now. http://bluerobot.com/web/css/center1.html

That is all it takes to center your designs in most of the browsers.

Next time we will tackle relative font sizes using percents instead of pixels.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Centering sites using CSS

 Jer  Sun Jul 30, 2006 11:11 am  
You may also want to include

body {
padding:0;
margin:0;
text-align: center;
}

This will clear the various margins and padding that different browsers use by defult.



 Alex McKee  Fri Aug 4, 2006 4:55 am  
You can condense this wrap code somewhat:

#wrap {
width: 760px;
margin: 0px auto;
padding: 10px;
border: 1px solid #000;
background: #eee;
}

 Busbu SEO Challenge  Sat Aug 2, 2008 8:36 pm  
Sometimes the code above doesn't work in other browser. You need to put a text-align: center to make it work.
 sanjay gupta  Thu Dec 10, 2009 1:47 am  
Hello
Thanks alot, the articles of your site is really helpful and usable for visitors.
This site http://www.paganshop1.com/ is more helpful for amazing success and intense of luck charm.
All of spells of site http://www.paganshop1.com/ are original and very powerful and all come with a guarantee.
I want this http://www.paganshop1.com/ to be a place where you feel safe and happy and be a part of something very special indeed.

Sanjay Gupta
Software Test Engineer
gupta.sanjay31@gmail.com
 sanjay gupta  Thu Dec 10, 2009 1:47 am  
Hello
Thanks alot, the articles of your site is really helpful and usable for visitors.
This site http://www.paganshop1.com/ is more helpful for amazing success and intense of luck charm.
All of spells of site http://www.paganshop1.com/ are original and very powerful and all come with a guarantee.
I want this http://www.paganshop1.com/ to be a place where you feel safe and happy and be a part of something very special indeed.

Sanjay Gupta
Software Test Engineer
gupta.sanjay31@gmail.com
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles