html - 将左 div 在右 div 的中间垂直对齐

Question

我在另一个(右侧)div 的左侧制作了一个带有 div 的“箭头”。两者都在容器 div 中。我试图将它与父级的中间对齐(因此保持在右 div 的中间对齐)

top: 50%;

...但它并没有完全对齐在中间。它可以设置为“margin-top”，但我不想要一个固定值。

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

Answer 1

尝试

top: calc(50% - 4px)

4px 是箭头 div 对 Angular 线的一半，除以 2。平方根(6 * 2 + 6 * 2)/2。

解释:箭头div旋转了，对 Angular 线长度为8.48px。您应该为容器的 div 高度的中间减去该值的一半，以找到相对于顶部的 y 坐标，使其居中。不过，这在旧版浏览器中不起作用。