html - 使 CSS 箭头居中

Question

我使用以下代码为自己创建了一个箭头，

.arrow-divider{
    height:12px;
    width:12px;
    transform:rotate(-45deg);
    border-right:2px solid white;
    border-bottom:2px solid white;
}

每当我尝试使用 margin:0 auto 将其居中时，它不会居中，因为我基本上只希望框右侧的一半居中，但它使整个框居中，如何我可以解决这个问题吗？

我目前卡在下面的代码上

<div class="box">

  <div class="center-divider"> </div>

  <div class="arrow-wrapper">
   <div class="arrow-divider"></div>  
  </div>

</div>

.box{
  position:relative;
  background:orange;
  width:100%;
  height:50px;
  text-align:center;
  line-height:50px;
}

.arrow-wrapper{
  display:inline-block;
}

.center-divider{
  position:absolute;
  width:6px;height:100%;
  background:red;
  left:0;right:0;
  margin:auto;
}
.arrow-divider{
  height:12px;
  width:12px;
  transform:rotate(-45deg);
  border-right:2px solid black;
  border-bottom:2px solid black;
}

我包含了以下演示:JSFiddle

最后一句话，我不想使用 Flexbox，它是 align-items 和 justify-content 功能。

编辑:为什么投反对票？

Answer 1

由于箭头分隔线的宽度/高度固定为 12px...为什么不减去它的一半:margin-left:-6px？

.arrow-divider{
  height:12px;
  width:12px;
  margin-left:-6px;
  transform:rotate(-45deg);
  border-right:2px solid black;
  border-bottom:2px solid black;
}

Here is the updated fiddle.