Centered layers?

Is there a way to position a layer centered verticaly & horizontally with CSS?

http://www.thenoodleincident.com/tutori ... tered.html

I believe it can be done with regard to margins from the top and bottom; make the margins 10px top and bottom and 10px left and right, but make sure your box is big enough.

I think we need rtm223 over here to check on me; he's the real CSS expert.

Sorry in a rush, but check out my answer in this thread:

http://www.ozzu.com/website-design-forum/centering-website-t26082.html

Great. Thank you rtm

I have tried every combination that I can think of and can't get your method to work, I guess I don't know enough about CSS to figure out where to put it or what I'm doing wrong. Here is my external CSS



and here is my html



Where should I put your code? I have tried to name my layer as .centered, but that didn't work. I tried a few other things but I haven't been able to get any of them to work. Thanks in advance.

FYI- also tried this but it no dice

This page describes it using a table: http://www.quirksmode.org/css/centering.html

This actually looks centered: http://spiritual-pixel.com/there/vertical.html

This also may help you: http://www.ozoneasylum.com/5339

Do you mean that you wrote [div class=".centered"]? If you did, write it without the dot. You're better than that, though

CSS really needs to have a way of centering things vertically.

Thanks. I got it to work horizontally but I can't get vertical. It's not really a big deal since it it just for a temporary page untill I get the site up & running.

I was going to ask about that. Maybe it's good that it's temporary - no one should kill themselves over CSS

CSS struggles with vertical alignment. Simply because vertical alignment ONLY works inside "table cell" elements and only affects "inline" elements inside. CSS tends to uses block level elements so vertical align doesn't apply anywhere. I tried some tests using

But everyone's favourite browser can't handle it this link that conorific posted:

http://spiritual-pixel.com/there/vertical.html
is the only way to center vertically using css comletely cross browser. It is a very clever method but it suffers from the following flaws:
1) if you shrink the page down there are bits that cannot be seen even if you scroll
2) You have to specifically set the height of the container
3)text-zoom breaks the whole damn thing.

IMO vertical centering is very rarely <b>needed</b> Most of the time the content will go off the bottom of the screen anyway (which will stop the method posted from working) If I ever really need vertical centering, which is probably never, even I would use a table (shock horror), simply to save myself a big 'ole headache


TBH, I wish you had said what you were trying to do beforehand. I see all you have is an image and some text:

Gasp, rtm-tables? What is this world coming to? I never would have thought that word would come from you

BTW-I see that your CSS tutorials is finally going...the gods have listened, lol.