[moojoo]

Just thought I would stick this in here as I did in WF because some person said it was impossible with CSS

This example shows how to set a fixed width box centered both vertically and horizontally with just CSS.It works simply by using absolute positioning of 50% and then using negative margins 1/2 the width and height of the object to compensate. Tested in IE 6, 7, FF, Safari etc.. This can also be done with percentages but that method however takes a bit more lovin to get it to behave in IE.

Working Example

#container {
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -200px;
border:solid 1px #CCCCCC;
padding:8px;
overflow:auto;
}

Yup! Its that easy!

This post has been edited by moojoo: 01 December 2006 - 11:39 AM

[marcamos]

Yep, that is exactly how I do it!

[Karl Buckland]

herkalees, on Dec 1 2006, 04:46 PM, said:

Yep, that is exactly how I do it!

At least is is now, eh?

[Ben Abrams]

nice example!

[James Mitchell]

great example - thanks Mark

[TJSingleton]

Clever, is this something new? or an old trick you've been keeping from us?

[benbacardi]

That is so useful!! I've been looking for a way to center things vertically with CSS for ages...

[Ben Abrams]

moojoo = harry potter for CSS

[marcamos]

Not to sounds like a horse's rear end, but I thought most people knew this?

[ducks and hides]

[TJSingleton]

To be honest, I've never needed to center vertical-- maybe a splash screen

[benbacardi]

Well maybe I live in a world of my own!!

[TJSingleton]

What's WF?

Also, Jon Hicks suggests

Quote

Instead of making the negative margin exactly half the height of the main content, give it 10px more. Its a picture framing trick, as centering it exactly can make it feel as if it’s ‘falling off the page’.

http://www.hicksdesign.co.uk/journal/verti...with-a-shiv-div

(More catching-up-on-feeds goodness _

[marcamos]

Yeah, Hicks is the man.

WF is an older web design forum that moojoo moderates, and is the same one us Admins came from before we started webradiance.

Here is a deserved link: http://www.webforumz.com

[TJSingleton]

10-4 -- But I try to stay away from things that are counter-productive -- like web forums! (just kidding of course -- but I seriously could be working.)

[william]

Good skills

[Ryan Fait]

That's the method I use, the only problem is that you need to make sure it's not too wide. With the negative margin and absolute positioning, it the lefthand side will just slide off the page (even with min-width set).

Quote

This can also be done with percentages but that method however takes a bit more lovin to get it to behave in IE.

Forgot to ask, but what do you mean by percentages? Like in the margin..?

[moojoo]

No you can use % values for the width/height to make the centered layout flexible. Here is a mostly complete example:

http://www.newguyinennis.com/samples/uber_...ring_fluid.html

and of course the static example:

http://www.newguyine..._centering.html

This post has been edited by moojoo: 12 January 2007 - 09:29 AM

[Ryan Fait]

Okay. Are you going to leave those links up permanently?

[moojoo]

Yes and I add more when I can. I also welcome ideas as I love to try out experiments and figure out how to make things happen with CSS.

http://www.newguyinennis.com/samples/

This post has been edited by moojoo: 16 January 2007 - 01:22 PM

[Ryan Fait]

Cool! I've got them bookmarked