title: Vertically fixed ,centered, navigation bar
body: <p>In the web page I am re-designing, I have a side navigation bar. This bar is fixed and floats as you scroll down the page. It is transparent and follows the screen for easy navigation. It is a nav element with an id="navbar". What I need is to have this navigation bar be centered vertically on all screens. On higher resolution screens it sits high. On lower resolution screens it sits low. How do I center this bar on all screens? Here is a chunk of my code so far. I can provide more if necessary.</p>
  
  <p>This is patial code for one of many pages with the navigation bar:</p>
  
  <pre><code>&lt;div id="row"&gt;
      &lt;nav id="navbar"&gt;
          &lt;ul&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.php"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a style="color: red;"href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.php"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;a href="page.html"&gt;page&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id="an id"&gt;
          &lt;h1&gt;some text&lt;/h1&gt;
          &lt;h3&gt;some text&lt;/h3&gt;
          &lt;h5&gt;some text&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my current CSS</p>
  
  <pre><code>#row {
      display: table-row;
      margin: 1%;
  }
  
  #navbar {
      width: 250px;
      position: fixed;
  }
  
  #navbar ul {
      font-size: 110%;
  }
  </code></pre>
  
  <p>I'll add this in case any one was wondering about the class="button"</p>
  
  <pre><code>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;
  }
  </code></pre>