Relatively positioned box inside an absolutely positioned box

Not sure if this question is qualified to be asked here. It's my desire to find the rules in the CSS spec, which I failed to, that are responsible for the effect that I describe bellow. So I feel it's somewhat spec-related. Hope it's OK to ask here.

Example: http://jsbin.com/ocadip/1/edit

By putting a relatively positioned box inside an absolutely positioned box, I was able to horizontally center a box that has a variable width, but this method failed to work vertically. All major browsers I tested refuse to center it vertically.

I have gone through the CSS2.1 spec multiple times, but couldn't find the responsible rules. Since all major browsers behave consistently on this one, I'm pretty sure I missed some rules. I'm wondering which ones.

Thanks for the help.

Glen