横向居中对齐多个div并实现X轴滚动的问题（附JSFiddle）

你当前代码的核心问题是用了position: absolute定位item——绝对定位的元素会脱离正常文档流，容器没法感知所有item的总宽度，自然触发不了横向滚动；而且绝对定位也没法让item自动横向排列居中。

下面给你一套简单可靠的解决方案，用Flex布局就能完美实现需求：

正确的CSS代码 #

#container {
  width: 80%;
  height: 40%;
  background: gray;
  /* 开启flex布局，让子元素横向排列 */
  display: flex;
  /* 让子元素整体在容器内水平居中 */
  justify-content: center;
  /* 强制子元素不换行，保持一行 */
  flex-wrap: nowrap;
  /* 当子元素总宽度超过容器时，触发横向滚动 */
  overflow-x: auto;
  /* 可选：优化滚动条样式（适配现代浏览器） */
  scrollbar-width: thin;
}

.item {
  width: 10%;
  height: 80%; /* 给个高度方便看到效果，可根据需求调整 */
  background: white;
  margin: 0 5px; /* 给item之间加间距，避免挤在一起 */
  /* 可选：让item内部内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

对应的HTML示例 #

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <!-- 继续添加更多item，就能看到滚动效果 -->
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

方案说明 #

1. Flex布局的优势：display: flex让容器内的item自动横向排列，flex-wrap: nowrap确保item不会换行；当item总宽度超过容器时，容器会自动触发横向滚动。
2. 居中效果：justify-content: center保证item数量较少时，整体在容器中间对齐；滚动时依然保持横向排列的结构。
3. 移除绝对定位：绝对定位会破坏文档流，让容器无法计算子元素的总宽度，这是你之前代码失效的关键原因。

如果有特殊场景必须用绝对定位，那需要手动计算每个item的位置，还要动态修改容器的滚动范围，这种方式复杂度高且容易出问题，非常不推荐。

内容的提问来源于stack exchange，提问作者user9659910