I made an "arrow" with a div on the left side of another (right) div. Both are inside a container div. I'm trying to align it at the middle of the parent (thus staying aligned at the middle of the right div) with
top: 50%;
...But it isn't aligning exactly at the middle. It can be set with "margin-top" but i don't want a fixed value.
Here's the JSFiddle: http://jsfiddle.net/qhofmgbb/
try
top: calc(50% - 4px)
4px being half of the arrow div diagonal, divided by 2. sqrt(6 * 2 + 6 * 2) / 2.
Explanation: The arrow div is rotated, the diagonal length is 8.48 px. You should subtract half of this value for the middle of the container's div height to find the y coordinate relative to the top, for it to be centered. This won't work in older browsers though.