如何使用CSS和JavaScript将选项卡居中？

我想在我的网页上创建一个居中的选项卡。我尝试了在这个网站上找到的几种解决方案，但效果并不理想

我使用的标签作为按钮，这是一个完整的页面标签。 我的代码很简单，我还添加了注释以便更好地理解。 下面是我的代码片段，希望你能帮助我

函数openPage（evt，pageName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
/*整页选项卡*/
正文，html{
身高：100%；
保证金：0；
字体系列：Arial；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#03A9F5；
盒影：0 2px 8px 0 rgba（0,0,0,0.2）；
}
/*设计按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
宽度：24%；
}
/*悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
边框底部：3倍实心#FFFFFF；
颜色：#E1FBFF；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
背景色：#EEEEEE；
身高：100%；
}

表1
表2
表3
表1
表2
表3
如今，对齐内容最简单的方法通常是使用-在这种情况下，
调整内容

.tab {
  display: flex;
  justify-content: center; // centers its children
}


函数openPage（evt，pageName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
/*整页选项卡*/
正文，html{
身高：100%；
保证金：0；
字体系列：Arial；
}
/*设置选项卡的样式*/
.标签{
显示器：flex；
证明内容：中心；
溢出：隐藏；
边框：1px实心#ccc；
背景色：#03A9F5；
盒影：0 2px 8px 0 rgba（0,0,0,0.2）；
}
/*设计按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
宽度：24%；
}
/*悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
边框底部：3倍实心#FFFFFF；
颜色：#E1FBFF；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
背景色：#EEEEEE；
身高：100%；
}

表1
表2
表3
表1
表2
表3
这就是你要找的吗


函数openPage（evt，pageName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
/*整页选项卡*/
正文，html{
身高：100%；
保证金：0；
字体系列：Arial；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#03A9F5；
盒影：0 2px 8px 0 rgba（0,0,0,0.2）；
}
/*设计按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：继承；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
宽度：24%；
}
/*悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
边框底部：3倍实心#FFFFFF；
颜色：#E1FBFF；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
背景色：#EEEEEE；
身高：100%；
}

表1
表2
表3
表1
表2
表3
只需更新此
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align:center; /*add this to center the buttons*/
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    /*float: left;*/ /*remove floats*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
     border-bottom: 3px solid transparent;/*Add this to prevent flickering/jumping*/
}