在 div 中间位置放置 CSS 箭头

Question

我有一个在div一侧的css箭头。

这里是一个jsbin，可以展示其效果。

无论div高度如何，我该如何将箭头定位在该div的中间？

- dagda1

Answer 1

当你使用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

- Amr Noman

Answer 2

我会通过更改计算“top”的方式来实现，因此在这种情况下使用“calc”，并减去边框宽度。

top: calc(50% - 10px)

这里是一个可行的jsbin。

- wegelagerer

Answer 3

你实际上不需要CSS3，CSS2就足够了，而且不需要太多hackishness: http://jsbin.com/civijuvofo/1/edit?html,css,output - 要点是例如 top: 50%; margin-top: -10px;。

特别地，你可以使用top: 50%将白色和灰色三角形定位在方框的中间位置。然后它们会太低 - 它们从50%中点开始，但向下降到50% + 2 *边框宽度。你可以使用CSS3的calc或CSS3变换来补偿，但最兼容的hack是仅应用等于边框宽度的负上边距。

这意味着你的“箭头”扇出在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 ：-)。

- Eamon Nerbonne