translateY -50% does not center things exactly

问题

I'm vertically centering custom arrows on BxSlider using translateY-50%. It's kinda centering the icons, but not exactly. This is what I have now"

Note the grey bars are of the same height, so the icon is placed more towards the bottom. What's causing this?

$(document).ready(function(){
      $('.slider').bxSlider({
      auto: true,
      pause: 3000,
       mode: 'fade',
       speed: 1200, 
      pager: false,
      controls: true,
           nextSelector: '.bxNext',
     prevSelector: '.bxPrev',  
          nextText: '<img id="next-arrow" src="img/next.png">',
     prevText: '<img id="prev-arrow" src="img/prev.png">'

});
    });


.bx-wrapper, .bx-viewport {
    height: auto; !important; //provide height of slider
}


.bxNext {
  float: right;
  position: absolute;
  right: 1.7%;
}

.bxPrev {
  position: absolute;
  left: 1.7%;
}

#slider-wrapper {
  position: relative;
}

.controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}


  <div id="slider-wrapper">
  
  
  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>
  
  <div class='controls'>
    <a href='#' id='PREV' class='bxPrev'></a>
    <a href='#' id='NEXT' class='bxNext'></a>
  </div>
  
  </div>

来源：https://stackoverflow.com/questions/64406585/translatey-50-does-not-center-things-exactly