html - 在 div 中居中三 Angular 形

Question

我试图在我的 div 中居中放置一个黑色的右向三 Angular 形，但没有成功。三 Angular 形应该用作按钮。我希望三 Angular 形在盒子内部看起来像这样:

目前，我的三 Angular 形位于框的最左侧。我如何修复它以使其垂直和水平居中？

我的代码:

.arrow-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 17.3px;
    border-color: transparent transparent transparent black;
    background-color: #ffcd11;
}

<div class="arrow">
    <button class = "arrow-right"></button>
</div>

Answer 1

一个解决方案是(如果您已经在容器中放置了箭头)。使用绝对/相对位置。并将其定位在父元素的中间。

.arrow-right {
	width: 0;
    height: 0;
	border-style: solid;
	border-width: 10px 0 10px 17.3px;
	border-color: transparent transparent transparent black;
  background: yellow;
  position:absolute;
  top: calc(50% - 10px);
  left: calc(50% - 8.65px);
}
.arrow {
  width:200px;
  height: 100px;
  background: yellow;
  position:relative;
}

<div class="arrow">
	  <button class = "arrow-right"></button>
</div>