html - 在 div 中将三角形居中

Question

我试图在我的 div 中将一个黑色的右指向三角形居中，但没有运气。三角形应该用作按钮。我希望三角形在盒子内看起来像这样：

目前，我的三角形在盒子的最左边。如何解决此问题以使其垂直和水平居中？

我的代码：

.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>

标签： htmlcss

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>