如何在div中自动水平滚动到中间？

<div class="scroll-container">
  <div class="content-wrapper">
    <div class="content">
      <!-- 实际内容 -->
    </div>
  </div>
</div>

.scroll-container {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
}

.content-wrapper {
  width: 1000px;
}

.content {
  width: 1200px;
  text-align: center;
}

var scrollContainer = document.querySelector('.scroll-container');
var contentWrapper = document.querySelector('.content-wrapper');
var content = document.querySelector('.content');

var scrollDistance = (content.offsetWidth - scrollContainer.offsetWidth) / 2;
scrollContainer.scrollLeft = scrollDistance;