css - Translate X and Y percentage values based on elements height and width?

Question

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding something?

http://jsfiddle.net/4wqEm/2/

Answer 1

When using percentage in translate, it refers to width or height of itself. Take a look at https://davidwalsh.name/css-vertical-center (demo):

One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent).