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 cen

Answer 1

If you don't know both heights, there are only two ways:

1. Set the parent display: table and children display: table-cell and vertical-align: middle.
2. Using CSS3 Flexbox: http://www.w3.org/TR/css3-flexbox/ but with limited browser support: http://caniuse.com/#search=flexbox

If you are interested in this topic, here there is a good article with more tips: http://www.vanseodesign.com/css/vertical-centering/

As you can see, the only way to vertical align an element without knowing its height and nor using CSS3 is using display: table-cell.