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

在div中实现自动水平滚动到中间的效果，可以通过以下步骤实现：

首先，确保目标div具有固定的宽度和高度，并且设置了overflow-x: scroll属性，以便在内容溢出时显示滚动条。
在目标div内部创建一个包裹元素，用于容纳实际内容。设置该包裹元素的宽度为超过目标div的宽度，以确保内容溢出。
在包裹元素内部创建一个子元素，用于承载实际内容。设置该子元素的宽度为超过包裹元素的宽度，以确保内容溢出。
使用CSS的text-align: center属性将子元素水平居中。
使用JavaScript获取目标div和子元素的宽度，并计算出子元素需要滚动的距离。
使用JavaScript的scrollLeft属性将目标div滚动到子元素的中间位置。

以下是一个示例代码：

HTML:

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

CSS:

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

.content-wrapper {
  width: 1000px;
}

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

JavaScript:

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;

这样，目标div就会自动水平滚动到中间位置。请注意，以上代码只是一个示例，实际应用中可能需要根据具体情况进行调整。