如何在屏幕中间放置选项卡

<div class="tab-container">
  <div class="tab">
    <button class="tab-button" onclick="changeTab(0)">选项卡1</button>
    <button class="tab-button" onclick="changeTab(1)">选项卡2</button>
    <button class="tab-button" onclick="changeTab(2)">选项卡3</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane">选项卡1的内容</div>
    <div class="tab-pane">选项卡2的内容</div>
    <div class="tab-pane">选项卡3的内容</div>
  </div>
</div>

.tab-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab {
  display: flex;
}

.tab-button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

function changeTab(index) {
  var tabContent = document.getElementsByClassName("tab-pane");
  for (var i = 0; i < tabContent.length; i++) {
    tabContent[i].classList.remove("active");
  }
  tabContent[index].classList.add("active");
}