Visjs timeline center months

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <p>
    A basic timeline. You can move and zoom the timeline, and select items.
  </p>
  <div id="visualization"></div>
  
  <script type="text/javascript">
  var items = new vis.DataSet([
    {id: 'A',  start: '2015-07-16', end: '2015-07-22', type: 'background', className: 'positive', tooltip: 'Period A with more description on tooltip'},
    {id: 'B',  start: '2015-07-25', end: '2015-08-05', type: 'background', className: 'negative', tooltip: 'Period B with more description on tooltip'},
    {id: 1, content: 'item 1', start: '2015-07-11', end: '2015-07-17'},
    {id: 2, content: 'item 2', start: '2015-07-16'},
    {id: 3, content: 'item 3', start: '2015-07-19', end: '2015-07-30'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    start: '2015-07-10',
    end: '2015-08-10',
    editable: true,
    showCurrentTime: true,
    dataAttributes: 'all'
  };

  var timeline = new vis.Timeline(container, items, options);
  
  var customDate = new Date();
  customDate = new Date(customDate.getFullYear(), customDate.getMonth()-1, customDate.getDate() +20);
  timeline.addCustomTime(customDate, 'milestone-1');
  
</script>
</body>

</html>

// Code goes here

/* Styles go here */

body,
html {
  font-family: sans-serif;
}

.vis-item.vis-background.positive {
  background-color: rgba(0, 0, 200, 0.2);
  cursor: hand;
}

.vis-item.vis-background.negative {
  background-color: rgba(255, 0, 0, 0.2);
}


.milestone-1 {
  background-color: green;
  width: 5px;
  /* border: 2px solid red; */
}
.vis-item-overflow {
  text-align: center;
}
.vis-current-time{
  background-color: black;
  width: 3px;
}