可水平滚动的标签集中在中心位置，靠齐抖动

<div class="container">
  <div class="scrollable-wrapper">
    <ul class="scrollable-list">
      <li>标签1</li>
      <li>标签2</li>
      <li>标签3</li>
      <li>标签4</li>
      <li>标签5</li>
      <li>标签6</li>
      <li>标签7</li>
      <li>标签8</li>
      <li>标签9</li>
      <li>标签10</li>
    </ul>
  </div>
</div>

.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scrollable-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scroll 10s linear infinite;
}

.scrollable-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.scrollable-list li {
  margin-right: 20px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

// 可选：根据实际情况调整滚动速度和停顿时间
const scrollSpeed = 50; // 滚动速度，单位：像素/秒
const pauseTime = 2000; // 停顿时间，单位：毫秒

const scrollableWrapper = document.querySelector('.scrollable-wrapper');
const scrollableList = document.querySelector('.scrollable-list');

// 获取滚动列表的宽度
const listWidth = scrollableList.offsetWidth;

// 设置滚动容器的宽度，使滚动列表居中
scrollableWrapper.style.width = listWidth + 'px';

// 根据滚动速度计算动画持续时间
const animationDuration = listWidth / scrollSpeed;

// 设置动画持续时间和停顿时间
scrollableWrapper.style.animationDuration = animationDuration + 's';
scrollableWrapper.style.animationDelay = pauseTime / 1000 + 's';