如何使password和username选项卡相互居中

<div class="login-form">
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'username')">Username</button>
    <button class="tablinks" onclick="openTab(event, 'password')">Password</button>
  </div>
  
  <div id="username" class="tabcontent">
    <!-- Username表单内容 -->
  </div>
  
  <div id="password" class="tabcontent">
    <!-- Password表单内容 -->
  </div>
</div>

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tablinks {
  background-color: #ccc;
  border: none;
  color: #000;
  padding: 10px 20px;
  cursor: pointer;
}

.tablinks.active {
  background-color: #aaa;
  color: #fff;
}

.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tabcontent.show {
  display: block;
}

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}