在左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坐標，以使其居中。 但是，這在較舊的瀏覽器中將無法使用。