如何在颤动中使选项卡栏默认从中心开始

<ul class="tabs">
  <li><a href="#tab1">选项1</a></li>
  <li><a href="#tab2">选项2</a></li>
  <li><a href="#tab3">选项3</a></li>
</ul>

.tabs {
  position: relative;
  display: flex;
  justify-content: center; /* 居中对齐 */
}

.tabs li {
  position: absolute;
  top: 50%; /* 上边距为父容器高度的一半 */
  transform: translateY(-50%); /* 垂直居中 */
  list-style: none;
}

.tabs li a {
  padding: 10px 20px;
  background-color: #ccc;
  text-decoration: none;
  color: #fff;
}

// 获取选项卡和内容区域的元素
const tabs = document.querySelectorAll('.tabs li');
const tabContent = document.querySelectorAll('.tab-content');

// 遍历选项卡，为每个选项卡添加点击事件处理程序
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 隐藏所有内容区域
    tabContent.forEach(content => {
      content.style.display = 'none';
    });

    // 显示当前选项卡对应的内容区域
    tabContent[index].style.display = 'block';
  });
});