title: css vertically centering a fixed positioning div
body: <p>I have the following HTML for a sort-of lightbox project.</p>
  
  <pre><code>&lt;div id="lightbox"&gt;
    &lt;img id="image" src="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>that is using the following CSS:</p>
  
  <pre><code>#lightbox{
  display:none;
  position:fixed;
  width:100%;
  text-align:center;
  z-index:600;
  cursor:pointer;
  left:0;
  top:100px;
  }
  
  #image{
  position:relative;
  height:600px;
  border:1px solid grey;
  }
  </code></pre>
  
  <p>To have the image always in the horizontal center, I am simply using text-align:center on the wrapper div, so I am 100% sure it will be correct.</p>
  
  <p>I am facing problems with the vertical centering and I am using a workaround of simply setting the top value in the #lightbox properties.</p>
  
  <p>As you can see the height of the image is known, so it is easily doable in jQuery but I am looking for a pure CSS solution.</p>
  
  <p>Any ideas? Thanks.</p>