CSS center vertical

[Slade]

Ok guys, here's the deal. I am using css for my website, everything is super duper, except for ONE page. It's the login page, I have used a table for the login box so as to position everything properly. What I want to know is, (btw the table is in a div) how do I vertically align my table to the center of the web page using css, is there a way at all? Otherwise I'm just going to have to use padding to get it away from the top a bit.

[Dani]

As far as I know, it's industry standard to set a padding or a margin. Can't seem to find a way to do it :-/ Check out http://www.stunicholls.myby.co.uk/ie/valign.html though.

[gooseneck]

My only problem with this technique has always been with the text being centered as well. I don't always want the text to be centered as well.

<-- Stumped

[Slade]

I can acheive it on mozilla (firefox latest) and netscape (latest) but the other browsers hate it. Man why can't all browsers just have the same definition on things :mad:

[DaveSW]

It's simple to do actually. You use negative margins, and it works in IE5 upwards.

Here's a demo created by a mate of mine:
http://www.infinitypages.com/research/cssverticalcentereddiv.htm

[Dani]

While searching for a solution the other day, I came across using negative margins, but I was confused and didn't understand how they work. I'm still confused, actually. I checked out the CSS you provided - but I don't see how using negative margins centers the div?

[gooseneck]

That is wonderful! I had never thought of using margins, thanks for that great example!

Let me see if I can try to explain it without making too much of a fool out of myself. :) When you specify where the top and left are going to be, in this example both were 50%, that means that the top-left pixel of your box will be 50% from the top and 50% from the left. But that means your area isn't going to be centered. The top-left pixel will be. By moving the margins back towards the left and top(with the negative numbers, a positive would move it farther from the top and left) half the length and width of the area you are actually moving it to exactly where you want, right in the center!

I hope that makes sense. Take care!

[Slade]

half the length and width of the area

What area? The box you are trying to centre I assume?

[DaveSW]

Yes that's right.
Basically we are moving the control point of the box to the center by telling it to use margins that are negative and half the width and height of the box. This means that when we position it 50% from left and top we are moving the center of the box to that position.
If you want to see how it works insert the lines of code one at a time, and watch how it changes it. First apply your dimensions, then your negative margins. then put your positioning in. That's how I figured it out the first time Ryan showed me. I actually have a demo built into one of my very early attempts at web design: http://www.emdevelopments.co.uk/tollgate/first/

Hopefully that's a little clearer? Maybe? Maybe Not?

BTW, don't worry too much if negative margins has you baffled. I still don't get Ryan's latest http://www.alistapart.com/articles/negativemargins/ :sad:

[Tekmaven]

Dave, thanks for this info. Just saved me! And great link to that alistapart site, just printed it out and saved it in my "Red Book of Knowledge" (where I put all the crap I want to remember..)

[DaveSW]

np. It's strange how some sections of the computer community advance in certain areas and everyone else advances in different ones!