title: Vertically center in viewport using CSS
body: <p>I am looking to vertically center a <code>&lt;div&gt;</code> in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only).  I have several constraints:</p>
  
  <ul>
  <li><strong>The <code>div</code> must be centered vertically in the viewport.</strong>  Methods I have seen only support centering inside another <code>&lt;div&gt;</code>, which is not what I want.</li>
  <li>The height of the <code>div</code> is not known.</li>
  </ul>
  
  <p>Other constraints:</p>
  
  <ul>
  <li>The <code>div</code> must be aligned to the right.</li>
  <li>The <code>div</code> has a constant width.</li>
  <li>The <code>div</code> must support padding.</li>
  <li>Other elements will be placed on the web page.  The <code>div</code> acts as a menu.</li>
  <li>The div must support a background colour/image.</li>
  </ul>
  
  <p>This gets me close to what I want, but not exactly:</p>
  
  <pre><code>#nav {
      position: fixed;
      right: 0;
      top: 50%;
  }
  </code></pre>
  
  <p>However, the <em>top</em> of the nav is in the middle, not the <em>middle</em> of the nav.</p>
  
  <p>Is there some technique which allows me to center my <code>div</code> with these constraints?</p>