Centering an CSS arrow

Question

I've used the following code to create myself an arrow,

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

Whenever I try to center this using margin:0 auto it will not center because I basically only want half of the right side of the box to be centered, but it centers the whole box, how could I fix this?

I'm currently stuck on the following code

<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;
}

I've included the following demo: JSFiddle

Last word, I'm not looking to use Flexbox and it's align-items and justify-content feature.

Edit: why the downvote?

Answer 1

Since the arrow divider is a fixed width/height of 12px... why not subtract half of it: 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.