I have a horizontal scroll with overflow hidden, how do i make it scroll to the center when i click it?

i want to make it so when i click on each number, that number will scroll to the center of the container. here's what i got so far in jsfiddle. https://jsfiddle.net/bf3nv33d/2/

here are the codes..

html
<div id='container'>
  <div id='scrollbox'>
  </div>
  <div id='display'>
  </div>
</div>

css
#container{
  border:1px solid blue;
  height:200px;
  width:200px;  
}
#scrollbox{
  height:43px;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
}
.numberbox{
  display: inline-block;
  background-color: white;
  padding: 2px 2px 2px 2px;
  width:20px;
  border-right:1px solid green;
}

jquery
for(var i=1; i<21; i++){
var numberbox = "<div class='numberbox numberbox"+i+"'>"+i+"</div>";
$('#scrollbox').append(numberbox);
}

$('.numberbox').on('click', function(){
    $('.numberbox').css('background-color', 'white');
    $(this).css('background-color', 'yellow');
  $('#scrollbox').animate({
    scrollLeft: $('.numberbox4').offset().left}, 200);
});