title: Vertically align a nested div
body: <p>I've been searching for a solution to this for a while. I have tried many methods including table-cell, top:50%, giving the container a fixed height and trying to center div 1 within it... Nothing is working without messing up the size of the 2 inner divs.</p>
  
  <p>I don't want it to be relative to the viewport width because the background of the page is going to be a fixed image and I'd like the logo to be in a fixed position over the image, but the solutions I've tried (top 50% and such) cause the logo to be centered no matter the size of the viewport. I'm guessing here I'm going to need to set a fixed height on the body but I'm not sure. Any ideas?</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="logowrap"&gt;
      &lt;div id="outerlogo"&gt;
          &lt;div id="innerlogo"&gt;LOGOHERE&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#logowrap{
      margin: auto;
      display: block;
      width:300px;
  }
  
  #outerlogo{
      background-color: rgba(255,255,255,0.9);
      border: 2px solid #656565;
      position: absolute;
      display: table; 
      width: 250px;
      height: 50px;
      padding: 20px;
  }
  
  #innerlogo{
      background-color: rgba(255,255,255,1);
      border: 2px solid #656565;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
      padding: 30px;
      font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  }
  </code></pre>