CSS how to position an element in a middle (half height / vertical 50%) of another element

Question

I'm looking forward to build a tooltip which is positioned next to the element, but in a middle of it. It's easy to put it over and under and position it in the horizontal center of an element. But is there a way to do so vertically (on the right or left side of an element, vertically positioned in a middle of that element height)?

For my purpose, height of the element is fixed (known) & height of tooltip is not, because it can contain various text content. And a tooltip can be a child of element.

However, I'm also curious about, how to do it when both heights are not fixed (unknown and can vary depending on content). By heights I understand element's and tooltip's height. Width can be known and fixed.

Answer 1

This is pretty late but I tried to make an example on codepen which shows a working example if I understood your question correctly.

http://codepen.io/trgraglia/pen/RWbKyj

Use CSS transform.

For example, transform:translateX(-50%);, will move an element left by 50% of ITSELF. Now you can align it to the parent with position and bottom or top or left or right and then move it by the dimensions of itself.

Hope this helps!