Javascript 如何将锚定标记居中放置在其父级用作覆盖的div中

我想要的是将锚定标签文本垂直居中，我还希望“contents”div适合屏幕，这样，如果屏幕变小或变大，锚定标签就不会超出边距造成溢出，这是我不想要的，我尝试了一系列不同的方法来解决这个问题，但似乎都不起作用，任何帮助都是非常感谢的！这是密码

$（函数（）{
$（“.menu link”）。单击（函数（e）{
e、 预防默认值（）；
$（“.menu overlay”）.toggleClass（“打开”）；
$（“.menu”）.toggleClass（“打开”）；
});
});
$（'.menu link'）。单击（函数（）{
$（'body'）.toggleClass（'no-scroll'）；
});
.nav{
显示器：flex；
证明内容：之间的空间；
填充：0.5%；
}
#品牌名称{
颜色：黑色；
字体大小：粗体；
字体系列：圆形标准黑色；
线高：60px；
字体大小：20px；
边缘顶部：45像素；
}
.菜单{
位置：绝对位置；
边缘顶部：50px；
右：5%；
高度：46px；
宽度：46px；
}
.菜单链接{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：1002；
光标：指针；
}
.菜单图标{
位置：绝对位置；
宽度：20px；
高度：15px；
保证金：自动；
左：0；
排名：0；
右：0；
底部：1px；
}
/* ------------- */
.菜单行{
背景色：白色；
高度：3倍；
宽度：100%；
边界半径：2px；
位置：绝对位置；
左：0；
过渡：所有0.25秒缓进缓出；
}
.menu-line-2{
排名：0；
底部：0；
保证金：自动；
}
.menu-line-3{
底部：0；
}
.menu.open.menu-line-1{
变换：translateY（7.5px）translateY（-50%）旋转（-45度）；
}
.menu.open.menu-line-2{
不透明度：0；
}
.menu.open.menu-line-3{
变换：translateY（-7.5px）translateY（50%）旋转（45度）；
}
/* ------------- */
.菜单圈{
背景色：#E095F0；
宽度：100%；
身高：100%；
位置：绝对位置；
边界半径：50%；
变换：比例（1）；
z指数：1000；
转换：转换0.3s轻松输入输出；
}
.菜单：悬停.菜单圈{
转换：比例（1.2）；
}
.菜单.打开.菜单圈{
变换：标度（60）；
}
/* ------------- */
.菜单覆盖{
过渡：不透明度0.2s缓进缓出；
不透明度：0；
显示：隐藏；
}
.menu-overlay.open{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
不透明度：1；
显示：块；
z指数：1001；
背景色：黑色；
溢出：隐藏；
}
.没有卷轴{
溢出：隐藏；
}
/***********锚定标签************/
.目录{
显示：表格；
左缘：5%；
保证金权利：5%；
}
.内容a{
显示：表格单元格；
文字装饰：无；
字体系列：圆形Std书；
字体大小：30px；
左侧填充：60px；
右边填充：60px；
颜色：白色；
垂直对齐：中间对齐；
}

测验
您只需添加
显示：flex和
对齐项目：居中到
菜单覆盖。打开
标识符：


$（函数（）{
$（“.menu link”）。单击（函数（e）{
e、 预防默认值（）；
$（“.menu overlay”）.toggleClass（“打开”）；
$（“.menu”）.toggleClass（“打开”）；
});
});
$（'.menu link'）。单击（函数（）{
$（'body'）.toggleClass（'no-scroll'）；
});
.nav{
显示器：flex；
证明内容：之间的空间；
填充：0.5%；
}
#品牌名称{
颜色：黑色；
字体大小：粗体；
字体系列：圆形标准黑色；
线高：60px；
字体大小：20px；
边缘顶部：45像素；
}
.菜单{
位置：绝对位置；
边缘顶部：50px；
右：5%；
高度：46px；
宽度：46px；
}
.菜单链接{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：1002；
光标：指针；
}
.菜单图标{
位置：绝对位置；
宽度：20px；
高度：15px；
保证金：自动；
左：0；
排名：0；
右：0；
底部：1px；
}
/* ------------- */
.菜单行{
背景色：白色；
高度：3倍；
宽度：100%；
边界半径：2px；
位置：绝对位置；
左：0；
过渡：所有0.25秒缓进缓出；
}
.menu-line-2{
排名：0；
底部：0；
保证金：自动；
}
.menu-line-3{
底部：0；
}
.menu.open.menu-line-1{
变换：translateY（7.5px）translateY（-50%）旋转（-45度）；
}
.menu.open.menu-line-2{
不透明度：0；
}
.menu.open.menu-line-3{
变换：translateY（-7.5px）translateY（50%）旋转（45度）；
}
/* ------------- */
.菜单圈{
背景色：#E095F0；
宽度：100%；
身高：100%；
位置：绝对位置；
边界半径：50%；
变换：比例（1）；
z指数：1000；
转换：转换0.3s轻松输入输出；
}
.菜单：悬停.菜单圈{
转换：比例（1.2）；
}
.菜单.打开.菜单圈{
变换：标度（60）；
}
/* ------------- */
.菜单覆盖{
过渡：不透明度0.2s缓进缓出；
不透明度：0；
显示：隐藏；
}
.menu-overlay.open{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
不透明度：1；
z指数：1001；
背景色：黑色；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
}
.没有卷轴{
溢出：隐藏；
}
/***********锚定标签************/
.目录{
显示：表格；
左缘：5%；
保证金权利：5%；
}
.内容a{
显示：表格单元格；
文字装饰：无；
字体系列：圆形Std书；
字体大小：30px；
左侧填充：60px；
右边填充：60px；
颜色：白色；
垂直对齐：中间对齐；
}

测验
您可以使用flexbox轻松实现这一点：

以下是实现您所需的
CSS
：

.menu-overlay.open {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 1;
    display: block;
    z-index: 1001;
    background-color: black;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.contents {
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    flex: 1;
    max-width: 100%;
    justify-content: space-around;
}

.contents a {
    text-decoration: none;
    font-family: Circular Std Book;
    font-size: 30px;
    color: white;
}

当我在上面提到的@Arfizur Rahman中将flexbox添加到“内容”或“菜单覆盖.打开”时，除了导航栏的元素（锚定标记不可见）在没有从菜单左侧打开菜单的情况下正常工作外，其他一切都正常工作，是否有任何修复以及为什么会发生这种情况？当我将flexbox添加到“内容”或“菜单覆盖。打开”除了导航栏（anch）的元素外，一切正常