vue2上面导航栏居中选项卡3个切换居中，

在 Vue2 中创建一个居中显示的导航栏并包含三个选项卡可以使用 Element UI 或者自定义 CSS 实现。这里我们提供一种基本的步骤：

1. **安装Element UI** 如果还没有安装，需要先通过npm或yarn添加依赖：

   npm install element-ui --save

2. **引入组件** 在`.vue`文件里，引入 `el-menu` 和 `el-tabs` 组件：

   <template>
     <div class="navbar">
       <el-menu default-active="1" :class="{ 'centered': isCentered }" style="width: 100%">
         <el-menu-item index="1">选项卡一</el-menu-item>
         <el-menu-item index="2">选项卡二</el-menu-item>
         <el-menu-item index="3">选项卡三</el-menu-item>
       </el-menu>
       <el-tabs v-model="activeTab" type="card" class="tabs-centered">
         <el-tab-pane label="选项卡一" name="tab1"></el-tab-pane>
         <el-tab-pane label="选项卡二" name="tab2"></el-tab-pane>
         <el-tab-pane label="选项卡三" name="tab3"></el-tab-pane>
       </el-tabs>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         isCentered: false,
         activeTab: "tab1",
       };
     },
     //...
   }
   </script>

3. **样式调整** 在CSS部分，你可以动态地改变 `.navbar` 的样式，使其在需要时居中：

   .navbar {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 50px; /* 自定义高度 */
     transition: all 0.3s ease;
   }

   .tabs-centered {
     text-align: center;
   }

   .isCentered {
     justify-content: space-between; /* 当需要居中显示时将这个属性设为true */
   }

4. **控制居中状态** 可能会在某个交互（如点击按钮、滚动等）时切换居中状态：

   methods: {
     toggleCenter() {
       this.isCentered = !this.isCentered;
     },
   },
   // 在需要的地方触发toggleCenter方法
   // 比如按钮点击事件