Center css chevron in div

Question

I have based this chevron off some code from here, and changed it to use it as navigation in a carousel. However, I'm struggling to center it in the gray area. Preferably it would be centered horizontally with a little padding to the edges.

I tried to wrap the chevron in another div, but with no success.

.chevron {
  position: absolute;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 44px;
  width: 109px;
  top: 242px;
  background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
  background: blue;
}
.chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 17%;
  background: red;
}
.chevron:before {
  left: 0;
  width: 51%;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

Answer 1

What about this: http://jsfiddle.net/8c2r3m5d/1/

To the :before and :after I added:

top:40%;

SHould be top because the entire chevron is rotated, this is why changing the top value makes it go left and right