CSS margins %'s

Question

Hello.

I would like an elements top margin to be specified as a percentage of the height of the window, is this possible?

If i set something to have a css property like the below

#idName{margin:10% 0;}

this will set it to 10% of the width of the browser viewport, which is not the desired behaviour.

The reason i want to do this is my site has content in say a 500px high box which i want to be in the center of the browsers viewport. So say the viewport is 500px high, it will have a margin-top or 0px, but if 600px high it will have margin-top of 50px, 700px high margin-top of 100px etc.

Please tell me the best way to achieve this!

Thanks

Answer 1

Vertical alignment can be tricky in css.

These articles give a pretty good overview of techniques to achieve it:

http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css

http://www.vdotmedia.com/blog/vertically-center-content-with-css/