CSS实现横向按钮滚动效果，点击按钮自动居中

可以使用CSS的flex布局来实现上述需求。在父元素上添加以下样式：

.new-from {
  display: flex;
  overflow-x: auto;
}

.new-from span {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px;
  cursor: pointer;
}

.new-from span.on {
  background-color: #ccc;
}

这样就可以让按钮横向排列成一行，并且超出宽度的部分会隐藏并增加滚动效果。然后，使用JavaScript监听按钮的点击事件，当点击靠边的按钮时，通过修改父元素的scrollLeft属性来实现左滑或右滑的效果。

var container = document.querySelector('.new-from');
var buttons = document.querySelectorAll('.new-from span');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    var buttonRect = button.getBoundingClientRect();
    var containerRect = container.getBoundingClientRect();
    var scrollOffset = buttonRect.left - containerRect.left - (containerRect.width - buttonRect.width) / 2;
    container.scrollTo({
      left: container.scrollLeft + scrollOffset,
      behavior: 'smooth'
    });
  });
});

这样，当点击靠边的按钮时，被点击的按钮就会靠近中间。