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

Question

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

我试图让这个导航栏垂直对齐，看起来太丑了。 如何将Logo移动到导航链接的顶部，导航链接可以垂直和水平移动到导航的中心。导航栏必须是全高并固定。 这是代码：

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

Answer 1

查看此代码段。我看不到你的标志，这就是我没有包含它的原因。但你可以使用那里的格式来做到这一点

＆＃13;

＆＃13;

.header {
   display: flex;
}

.header nav {
   margin: 0 auto;
}

.header nav ul {
   margin: 0;
   padding: 0;
}

.header nav ul > li {
   display: block;
   text-align: center;
}

.header nav ul > li > a {
   display: block;
   text-align: center;
   color: #333;
   padding: 7px 12px;
   text-decoration: none;
   font-family: Montserrat;
}

.header nav ul > li > a > img {
   display: inline-block;
   max-width: 100px
   max-height: 60px;
}

＆＃13;

<div class='header'>
    <nav>
        <ul>
            <li><a href='/'><img src='' alt='logo' /></a></li>
            <li><a href='/'>Home</a></li>
            <li><a href='featurs'>Features</a></li>
            <li><a href='developers'>Developers</a></li>
            <li><a href='testimonials'>Testimonials</a></li>
            <li><a href='auth/signup' class='reg-btn'>Signup</a></li>
        <ul>
    </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请使用以下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; 
}