在左div的中间垂直对齐左div

Question

我用另一个div（右侧）的左侧的div制作了一个“箭头”。 两者都在容器div中。 我正在尝试将其与父母的中间对齐（因此保持在右div的中间对齐）与

top: 50%;

...但是它并没有完全对准中间位置。 可以将其设置为“ margin-top”，但我不希望使用固定值。

这是JSFiddle： http ： //jsfiddle.net/qhofmgbb/

Answer 1

尝试

top: calc(50% - 4px)

4px是箭头div对角线的一半，除以2。sqrt（6 * 2 + 6 * 2）/ 2。

说明：箭头div旋转，对角线长度为8.48像素。 您应该减去此值的一半作为容器div高度的中间值，以找到相对于顶部的y坐标，以使其居中。 但是，这在较旧的浏览器中将无法使用。