如何让水平滚动菜单的中间按钮初始显示在.scrollmenu容器中央

纯CSS方案（无需JavaScript） #

这种方案利用CSS滚动捕捉特性，简单高效，适合静态布局场景：

1. 先修正原CSS中的笔误：border-weigth 改为 border-width
2. 给滚动容器添加滚动捕捉规则，同时给目标元素设置居中对齐
3. 给中间按钮添加类名方便定位

修改后的完整代码：

.container {
  width: 414px;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #333;
  overflow-x: auto; /* 明确指定横向滚动 */
  white-space: nowrap;
  scroll-snap-type: x mandatory; /* 开启横向强制滚动捕捉 */
  scroll-padding: 0; /* 消除默认内边距影响 */
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  width: 100px;
  border-width: 1px; /* 修正笔误 */
  border-color: white;
  border-style: solid;
}

/* 给中间按钮设置滚动捕捉居中 */
div.scrollmenu a.middle-item {
  scroll-snap-align: center;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="container">
  <div class="scrollmenu">
    <a href="">A</a>
    <a href="">B</a>
    <a href="" class="middle-item">!Middle!</a> <!-- 添加类名 -->
    <a href="">D</a>
    <a href="">E</a>
  </div>
</div>

原理：scroll-snap-type: x mandatory 让容器在滚动时自动吸附到指定捕捉点，scroll-snap-align: center 把中间按钮的中心设为捕捉点，页面加载后容器会自动滚动到该位置，实现按钮居中。

JavaScript方案（灵活适配动态场景） #

如果菜单元素数量或宽度会动态变化，用JS计算滚动位置更可靠：

/* 保留原修正后的CSS，无需添加scroll-snap相关属性 */
.container {
  width: 414px;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #333;
  overflow-x: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  width: 100px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="container">
  <div class="scrollmenu">
    <a href="">A</a>
    <a href="">B</a>
    <a href="" class="middle-item">!Middle!</a>
    <a href="">D</a>
    <a href="">E</a>
  </div>
</div>

<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const scrollMenu = document.querySelector('.scrollmenu');
  const middleItem = document.querySelector('.middle-item');
  
  // 计算滚动距离：让中间元素的中心与容器中心对齐
  const scrollLeft = (middleItem.offsetLeft + middleItem.offsetWidth / 2) - scrollMenu.clientWidth / 2;
  
  // 执行滚动
  scrollMenu.scrollLeft = scrollLeft;
});
</script>

原理：通过计算中间元素的左侧偏移量加上自身半宽，减去容器的半宽，得到精准的滚动距离，直接设置容器的scrollLeft属性实现居中。

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