Best way to center a container in css?

[hkl]

Best way to center a container in css?

thanks ppl:D

[Ankou]

You'd think that's simple to answer, but it's not when you don't provide much info. :)

Center how? Horizontally? Vertically? Both?

And...

What's being centered? A div in the body? Div inside another div? Paragraph text inside a div? Image? ... etc.


Yeah there are different methods to center different tags/image/text depending on what their parent element is. You asked for the best method, but without more info... it's hard to say. (Am I being too difficult?)

[CriTiCeRz]

To center a container in CSS use this CSS:


body {
text-align: center;
}
#container {
text-align: left;
margin: auto;
}
And hopefully you know the HTML. :)

[.soulty]

^q's: don't you need to include the width of your div to be able to center it?

and if we are talking about centering content to the center of the browser, should we not just use:

body{padding:0 0 0 0; margin:0 0 0 0;}
#wrapper{margin:0 auto; width="yourwebsitewidth"}
#content{text-align:left;}

[Ankou]

I've always went with something like:


body{
margin: 0 auto;
text-aling: center;
}

#container{
margin: 0 auto;
width: 760px; /* or some other width and unit */
text-align: left;
}

I think the margin: 0 auto; in the body helps center the div (ID="container" in my example) in IE5 for Mac. It may be another browser, but I think I remember reading that somewhere. And of course the text-align: left; in #container is optional -- but probably a good idea unless you want everything in that div to remain centered.

[.soulty]

^ but you dont need to use text-align:center for the body.

Like in my example the body should not be used to align object rather you should have a wrapper or a container that acts like a main table to hold and align all your site. So you will not need to align your text left since they are left as default.


body{
padding:0 0 0 0;
margin:0 0 0 0;
}

#wrapper{
margin:0 auto;
width="yourwebsitewidth";
}

#content{
padding:5px 5px 5px 5px;
}

[Ankou]

Actually without the text-align: center for body IE5/5.5 won't center.

[CriTiCeRz]

Exactly, Ankou is right. You have to use width for the wrapper for the center to work...

[.soulty]

Actually without the text-align: center for body IE5/5.5 won't center.Ah ok, didn't know that.

eftharisto fili. ;)

:ps: CriTiCeRz didn't i say "You have to use width for the wrapper for the center to work...", lol..

in any case, this questions been answered, yes? So i wonder if hkl has actually seen the thread/responses?

[CriTiCeRz]

Oh... I was just making it more clear. :)

[Maizoon]

whats wrong with centering this way:

#container {
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
position: absolute;
top: 50%;
left: 50%;
}

??

[Ankou]

Nothing's really wrong with doing that. I think a lot just depends on personal taste.

I always skipped using that method because there are times when I'm unsure if I'm going to need to set my container's width using px or em/percentage. With px it's easy to center by using negative margins. But if I decide to use a percentage value for the width then I need to do some math to figure out the negative margin. Instead of having to worry about that, I just go for a "math free" centering technique. :)

I know it's always 1/2 of the width of the container's width. So with a container set at 90%, I need a negative margin of 45%, but if I change the width of the container, I have to change the negative margin. No big deal, but hey if I can get away without needing to change more than I have to I'll work with that.

[zanzinato]

I've always found that using CSS to center horizontally and then Javascript to center vertically gives the most consistent results cross-platform/browsers.