带有箭头中心的CSS Div

Question

我想知道如何创建一个带有向下指向底部的箭头的div。我可以像这样实现这种效果：http://jsfiddle.net/hyH48/。

但是，我不确定如何确保箭头位于div的中心？在小提琴中，它的位置使用：

left: 20px;

但是我可以动态设置它出现在中心吗？显然，当人们在不同的屏幕分辨率下查看页面时，我无法事先知道要放在这里的整数。

请帮帮忙？

Answer 1

如果您知道箭头的宽度，可以执行此操作（fiddle）：

left: 50%;
margin-left: -20px; /* -(width/2)px */

否则，您可以使用left: 50%转换

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

Answer 2

您要做的是将left:50%;和margin-left:20px;添加到#mybox:after。见http://jsfiddle.net/hyH48/1470/