homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to center a <div> box using CSS?

 7:01 pm on Oct 8, 2004 (gmt 0)

The way I know is by adding align=center like this:

<div align=center>

But I want to put the center property inside a style class, like this:

<div class=center_box>

But I don't know what to put in the center_box style.

Can anyone help? Thanks.



 7:04 pm on Oct 8, 2004 (gmt 0)

If I'm not misaken (My CSS skills are shaky, at best) you should be able to do something like this in your style sheet:

align: center;



 7:28 pm on Oct 8, 2004 (gmt 0)

align:center; works on the children of that element, so it won't center the div itself, it'll center everything inside of it.

If you use .center_box {margin:0 auto;} in the div, it will center it in virtually every browser except one--guess which one? To center it in IE use the align:center; on a containing div.


 7:49 pm on Oct 8, 2004 (gmt 0)

It's not working.

This is what I did

.outermost_body{width:750px;height:500px;background:white;padding:5px;align:center;margin:0 auto;}

<div class=outermost_body>

It still doesn't center the box.

Any idea?


 7:57 pm on Oct 8, 2004 (gmt 0)

Try this:

body {
text-align: center;

.outermost_body {
text-align: left;
width: 750px;
height: 500px;
background: white;
padding: 5px;
margin: 0 auto;

In the place of "body", put the parent element of ".outermost_body" (unless "body" is the parent element).


 8:06 pm on Oct 8, 2004 (gmt 0)

Hey it works!

I put text-align:center;margin:0 auto; into the body:

body{padding:0;margin:0;background: gray url(image/bg.gif);text-align:center;margin:0 auto;}

Thank you!

(But this also means the same thing that you cannot center the div itself. You can only center it from the parent, which in this case is the <body> tag.)


 8:25 pm on Oct 8, 2004 (gmt 0)

.outermost_body{width:750px;height:500px;background:white;padding:5px;align:center;margin:0 auto;}

Should be text-align: center;

You can only center it from the parent, which in this case is the <body> tag

Right. Even in cases where text-align: center works, it works to center the children of the element with that value. In the case of a block element containing only text, the child that gets centered is the inline text itself, but really you're NEVER actually centering the element itself.

For example, if you apply text-align: center; to a <p> element, the paragraph block itself doesn't move, since a block element by definition fills the width of it's container. Instead, the block stays the same, and the text inside of the <p> block get centered.


 8:28 pm on Oct 8, 2004 (gmt 0)

Internet Explorer misinterprets the 'text-align' property by centering the all of the child elements rather than just the inline elements. To correct it, you put "text-align: left" in the element that should be centered to fix IE's bug.
I'm fairly positive that "margin: 0 auto" should go in the element that should be centered. It requires a width to work, however.


 10:05 am on Oct 9, 2004 (gmt 0)

you can centre a DIV horizontally by:

body {
margin: 0px 20px 0px 20px;

#box {
width: 700px;
height: 400px;
margin: 0px auto -1px auto;

Vertical centre alignment is a totally different ball game.


 6:19 pm on Oct 9, 2004 (gmt 0)

Should be text-align: center;

Yes, of course, my bad. I must have hit a bad sector when I was typing that.

Sorry about that.


 7:44 pm on Oct 9, 2004 (gmt 0)


photon, my quote pulled "align:center" from ngentot's post. I hadn't even noticed it in yours until you pointed it out! :)

although now that I see it I must say I'm rather disappointed... ;)


 12:39 am on Oct 10, 2004 (gmt 0)

Rats! I shouldn't have said anything, and perhaps no one would have been the wiser! :)

One other method that no one has mentioned yet is the negative margin ploy. Set the left side of your div at 50% and then set a negative margin half the width of your div. So if your div is 750px wide, your CSS would look like


I'm not sure why anyone would prefer that method over the others; I'm just presenting it as another alternative.

Double-check my code, cEM.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved