best way to center website?

[Makeshift]

I’ve been wondering about the best way to center a website, and I’ve tried a few different ways to do it.
I’ve tried.

Code:

body {
text-align: center;
}

but, it’s never worked well.

i’ve also tried

Code:

div#pagewrap {
margin: 0 auto;
}

it works well, but not for IE users.

and i’ve also tried

Code:

content

but i don’t like having to use tables unless i have to.

any ideas guys?

[KaizenNeko]

I’ve never had a problem using a container DIV and the margin: 0 auto; way. Maybe instead of div#pagewrap, use JUST #pagewrap for your CSS descriptor. The other thing is you’ll really never notice the centering unless the wrapper has a width (fixed/flexible) because at 100% it just fills the screen anyway rendering the effect unnoticeable.

Here’s a little sandbox page I’ve made for my code tests. http://dev.infiniteunreality.com/botp/ It’s a template I was coding for a site I am redesigning (trying to learn PHP templates to do it) and has a bloody mess of CSS in it, but it’s all in plain view to browse through. Also I’ve tested it against IE5.5 to IE8, Opera, Safari, Firefox 3 and up, and Chrome and with some minor box-model quirks, it’s centered fine in all browsers.

The thing I always ran in to with the text-align:center way is that you then have to text-align:left everything else back to get it to look right so I TRY to avoid it since really it’s only needed for IE5.5 anyway.

[Makeshift]

hmm, looks nice. But I don’t have a problem with the margin: 0 auto; but IE doesn’t do the auto margins, so, it’s not good for everyone looking at the website.

[TheDoc]

Makeshift, I have never heard of IE not accepting the margin: 0 auto; to center a website. I think you might be misinformed.

[Makeshift]

both my IE tab for firefox and my IE 7 will not display the page as centered.

[GPirie]

Give your wrap a width as well as the 0 auto trick, so your code will look like this:

Code:

#page-wrap { width: 960px; margin: 0 auto; }

It needs a width otherwise it will fill the width of the screen.

[Sumeet Chawla]

yeah, without a particular width the auto centering thing won’t work ;)

[sherrikhan]

hi, this solution only work with horizonal center, but is there any way to centered the website by height??

so you change your browser it is centered from height too??

is there any way to fix this?

thanks for reading

[Author]

Posts