Css Relative Positioning with negative top percentage

Recently I'm playing with custom jquery ui widget which is positioned "center bottom" of specified position. (Just imagine that google m开发者_高级运维ap marker's anchor..)

First, I have main widget and a DIV which has relative positioning with left -50%. Yes, it was shifted to left by its half width. But for height, it's not working what I thought.

Please checkout my example at http://jsfiddle.net/Reiot/UUADc/ and see what's wrong with that. Should I not use vertical negative % and always specify its pixel height?

-50% is going to be 50% of the height of a parent object, in this case 200px. So your vertical is getting offset 100px. Since you know the width of your widget (73px), just use the specific offset, -36px