This is how positioning with coordinates works:
When you put "position: relative" on someone, what you've done is created a NEW box on top of the OLD box. The old box is invisible, because all the visible things in your box are transferred to the new box. When you add coordinates like top and left to it, you move the NEW box, and the OLD one remains behind, taking up space.
If you give % coordinates, this is in relation to that old box, not the page.
When you put "position: absolute" on someone, you yank that box entirely out of the flow and place it in relation to the nearest positioned ancestor. This is any box who is a parent, grandparent, etc with "position: something" on it. If no ancestor box is positioned, then the document is used (the specs say the viewport, but this makes no sense since you can scroll these abso-po'd boxes off screen).
To move your box 50% down to the middle, you have to realise the browser has a problem here: the middle of the screen or the middle of the document?? It does neither well.
Paul O'B has a convoluted solution for vertically centering big boxes (and it's convoluted because of how browsers and CSS (don't) work well vertically). Here's one: http://pmob.co.uk/pob/hoz-vert-center.htm
He's got others somewhere too. Notice it takes extra elements to work.