居中的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功能。

编辑：为什么downvote？

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.

Answer 2

难道这就是你想达到什么目的？

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

我加入这两个规则来.arrow-wrapper：

position: absolute; 
right: 25%; 

你的头已经固定的高度，这样你就可以在中心垂直方向只需top属性添加到它。