位置css箭頭一半下降div

Question

我有一個css箭頭定位在我的div大小。

這是一個jsbin，它顯示了它的行動。

無論div的高度是多少，我怎樣才能將箭頭放在div的中間位置？

Answer 1

我會通過改變你計算top的方式來做到這一點，所以在這種情況下，使用「calc」和減去border-width。

top: calc(50% - 10px)

這裏是一個工作jsbin。

Answer 2

當您使用position: absolute可以居中這樣的事情：

position: absolute; 
top: 50%; 
transform: translateY(-50%); 

top: 50%分配父的高度的50％到頂部

transform: translateY(-50%)由元素的高度的50％移動元素了。

無論元素的高度還是父母的身高，此方法都可以工作。

你也可以用它來水平居中的事情：

position: absolute; 
left: 50%; 
transform: translateX(-50%); 

或垂直和水平：

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

http://jsbin.com/lixisidezu/1/edit?html,css,output

Answer 3

你實際上並不需要CSS3此; CSS2就足夠了，沒有太多的嘲諷：http://jsbin.com/civijuvofo/1/edit?html,css,output - 其實質是做top: 50%; margin-top: -10px;。

特別是，您可以使用top: 50%;將白色+灰色三角形放在半框下方。然後他們太低 - 他們從50％的中點開始，但他們下降到50％+ 2 *邊界寬度。你可能使用css3 calc來補償，或一個css3變換，但最兼容的黑客只是應用負的頂部邊界等於邊界寬度。

這意味着你的「箭頭」扇出，然後看起來在CSS如下：

.container:before, .container:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 50%; 
    right: 100%; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
} 

.container:before { 
    margin-top: -11px; 
    border-width: 11px; 
    border-right-color: #dedede; 
} 

.container:after { 
    margin-top: -10px; 
    border-width: 10px; 
    border-right-color: #fff; 
} 

這要工作的跨瀏覽器幾乎在過去的10 - 15年發佈的任何瀏覽器。我不確定IE7 :-)。