Html 如何在侧栏中心垂直和水平移动导航栏

图像有点长，请向下滚动查看代码

我想让导航条垂直对齐，但它看起来太难看了。 如何将徽标移动到导航链接顶部，以及导航链接如何垂直和水平移动到导航中心。导航杆必须为全高且固定。 代码如下：

.site-header  {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 18rem;
    height: 100vh;
        margin:auto !important
}

.logo {
     display: flex;
      margin: auto auto 0;
      padding: 0.5rem;
}

.primary-menu {
flex-direction: column;
 width: 100%;

}

.primary-menu > li {
    display: block; 
}

---

请查看此代码段。我看不到你的标志，这就是为什么我没有包括它。但是你可以使用那里的格式

.header{
显示器：flex；
}
.标题导航{
保证金：0自动；
}
.收割台导航ul{
保证金：0；
填充：0；
}
.收割台导航ul>li{
显示：块；
文本对齐：居中；
}
.收割台导航ul>li>a{
显示：块；
文本对齐：居中；
颜色：#333；
填充：7px 12px；
文字装饰：无；
字体系列：蒙特塞拉特；
}
.收割台导航ul>li>a>img{
显示：内联块；
最大宽度：100px
最大高度：60px；
}

请使用以下css：

.site-header  {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin:auto !important;
    right: 0;
    bottom: 0;
}
.logo {
     display: block;
     margin: auto auto 0;
     padding: 0.5rem;
}
.primary-menu {
    flex-direction: inherit;
    width: 100%;
}
.primary-menu > li {
    display: block; 
}

---

徽标位于左上方。它看起来很小，我不知道为什么：（我已经为你的徽标添加了一个位置。只需输入徽标图像的url。根据你的需要调整样式是否满足你的需要？但是它可以在这里的代码片段上工作。你没有复制我编写的html和css吗？