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

要使password和username选项卡相互居中，可以使用CSS和HTML来实现。以下是一种常见的实现方式：

HTML结构：

<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>

CSS样式：

.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;
}

JavaScript代码：

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";
}

这段代码使用了flex布局来实现居中对齐。通过设置父容器.login-form为display: flex;和align-items: center;，可以使其子元素在垂直方向上居中对齐。同时，通过设置.tab的display: flex;和justify-content: center;，可以使选项卡按钮在水平方向上居中对齐。

点击选项卡按钮时，通过JavaScript的openTab函数来切换显示对应的表单内容。通过添加或移除CSS类名来控制选项卡按钮的样式。

这种实现方式适用于各种登录或注册页面，可以提供良好的用户体验。