Вертикально фиксированная, по центру, панель навигации

Question

На веб-странице я занимаюсь редизайном, у меня есть боковая панель навигации. Эта панель фиксируется и плавает при прокрутке страницы вниз. Он прозрачен и следует за экраном для удобной навигации. Это элемент nav с 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>

Я надеюсь, что это помогает.