css - 带箭头中心的 CSS div

Question

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

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

left: 20px;

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

请帮忙？

Answer 1

如果你知道箭头的宽度，你可以这样做（小提琴）：

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/