Centering a page in CSS

hitman · Apr 25, 2005

I don't really understand how it works.
Do you just put
{margin:0;text-align:center;}

or have an absolute positioning, then manually find the right centered position?

If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

Spekta · Apr 25, 2005

you should use margin: auto not margin: 0, and it should work for every browser. using both options will allow both text and images, containers etc to be aligned

genious · Apr 26, 2005

Ok, I don't know about every1 else but i rarely use margin in my css/css2
coding, I normally use align:{left/center/right} and text-align:{left/center/right} you could use margin:50% but then it will mess your page
up I say just use the simple but yet easy method which has been long supported. by every version of html <center></center> i simply suggest you
use <center></center> or align and align can be with almost every tag. like
for example <div><body><table>and<span>

rimian · Apr 30, 2005

centre aligning with CSS can be troublesome. text-align only aligns text like it says.

if you're aligning your webpage to the centre then you should use a table with one cell 100% with and aligned center. i've heard a lot of people talking about tables being outdated. they're really good for that kind of thing

branwen · May 9, 2005

hitman said:
I don't really understand how it works.
Do you just put
{margin:0;text-align:center;}

or have an absolute positioning, then manually find the right centered position?

If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

The best thing to do would be to make a div for the page

div.foo { margin-top: 0px; margin-left: auto; margin-right: auto; }

foo=whatever you want the class to be. You can add however many px to the top margin. As far as I know, you can't center it vertically.
So the html would be like this
<div class="foo">
(in here put whatever thing you want in your page,
and give them classes of their own for their positioning within the div)
</div>

You will want to give your div a width and height, too.

I hope this helps!

df-sean · May 15, 2005

The tried and true method:

html, body {
margin: 0;
padding: 0;
text-align: center; /*for IE stupidity*/
}

#container {
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
text-align: left; /*corrects for IE hack*/
}

hitman · May 18, 2005

Wow! Excellent! Thanks a lot!

df-sean · May 18, 2005

Happy to help :gl:

ceos.org.mx

bfk.fr

alfonsorestaurante.es

escuelasiade.cl

tribratanewspolreslabuhanbatu.id

qte-uct.com

noozy.ai

co2nutraceutics.co.za

anime-world.to

aa7.uk

Centering a page in CSS

Established Member

Established Member

Account Closed

Established Member

Established Member

Established Member

Established Member

Established Member

JobFlix.com

education.it.com

Thief.co

Sharpify.com

HoneyStore.com

SmartWallet.pro

SXBox.Com

Acuerdo.com

aphrodixia.com

Humanoid.co

Similar threads

We're social

JobFlix.com

education.it.com

Thief.co

Sharpify.com

HoneyStore.com

SmartWallet.pro

SXBox.Com

Acuerdo.com

aphrodixia.com

Humanoid.co

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling