CSS how to position an element in a middle (half height / vertical 50%) of another element
css, css-transforms, height, position, vertical-alignment
Solution
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!
Problem
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.