垂直固定，居中，导航栏

Question

在我正在重新设计的网页中，我有一个侧面导航栏。当您向下滚动页面时，此栏是固定的并浮动。它是透明的并且跟随屏幕以便于导航。它是一个 id="navbar" 的导航元素。我需要的是让这个导航栏在所有屏幕上垂直居中。在更高分辨率的屏幕上，它的位置很高。在较低分辨率的屏幕上，它的位置很低。如何让这个栏在所有屏幕上居中？到目前为止，这是我的一部分代码。如有需要，我可以提供更多。

这是带有导航栏的许多页面之一的部分代码：

<div id="row">
    <nav id="navbar">
        <ul>
            <li class="button"><a href="page.html">page</a></li>
            <li class="button"><a href="page.php">page</a></li>
            <li class="button"><a style="color: red;"href="page.html">page</a></li>
            <li class="button"><a href="page.html">page</a></li>
            <li class="button"><a href="page.html">page</a></li>
            <li class="button"><a href="page.php">page</a></li>
            <li class="button"><a href="page.html">page</a></li>
            <li class="button"><a href="page.html">page</a></li>
            <li class="button"><a href="page.html">page</a></li>
        </ul>
    </nav>
    <div id="an id">
        <h1>some text</h1>
        <h3>some text</h3>
        <h5>some text</h5>
    </div>
</div>

这是我当前的 CSS

#row {
    display: table-row;
    margin: 1%;
}

#navbar {
    width: 250px;
    position: fixed;
}

#navbar ul {
    font-size: 110%;
}

如果有人对 class="button" 感到疑惑，我会添加这个

li.button {
    background-color: transparent;
    padding: 2px 6px 2px 6px;
    border-radius: 15px;
    border-top: 3px solid #F2F2F2;
    border-right: 2px solid #260000;
    border-bottom: 2px solid #450000;
    border-left: 3px solid #D1D1D1;
    margin-bottom: 2px;
}

Answer 1

在下一个示例中，“navbarwrapper”保持“navbar”垂直居中在视口的左侧。

#navbarwrapper
{
    display: -webkit-flex ;
    display: flex ;
    -webkit-flex-direction: column ;
    flex-direction: column ;
    -webkit-justify-content: center ;
    justify-content: center ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    height: 100% ;
    z-index: 999999999 ;
}
#navbar
{
    background-color: #f33 ;
    width: 40px ;
    height: 100px ;
    opacity: 0.8 ;
}

<div id="navbarwrapper">
 	<div id="navbar"></div>
</div>

<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>

希望对你有帮助。