将 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

既然箭头分隔线是固定的 width/height 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.

Answer 2

这是您要实现的目标吗？

https://jsfiddle.net/5aex395k/4/

我已将这两条规则添加到 .arrow-wrapper:

position: absolute;
right: 25%;

您的 header 具有固定的高度，因此您可以将箭头垂直居中，只需添加 top 属性即可。

将 CSS 箭头居中

Centering an CSS arrow

html

css

centering