将 css 箭头定位在 div 的中间位置

Question

我有一个 css 箭头定位在我的 div 的大小处。

这是一个jsbin，显示了它的实际情况。

无论 div 的高度是多少，如何将箭头定位在 div 的中间位置？

Answer 1

当你使用时，position: absolute你可以像这样居中：

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

top: 50%将父级高度的 50% 分配给 top

transform: translateY(-50%)将元素向上移动元素高度的 50%。

无论元素的高度或父元素的高度如何，此方法都有效。

您还可以使用它使事物水平居中：

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

或垂直和水平：

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