title: How can I vertically offset child element from the center of its parent?
body: <p><a href="http://jsfiddle.net/zS7yK/2/" rel="noreferrer">Here</a> is a jsFiddle I set up.</p>
  
  <p>The parent and child element's height will be uncertain(means it will change after) and the child element's position must be absolute.</p>
  
  <p>How can I offset the child element vertically by five pixels from the center of the parent?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.parent{
      position:relative;
      margin: 10% auto;
      background:lightgray;
      height:50px;/*parent's height will change after*/
      width:200px;
  }
  .parent .child{
      position:absolute; /* needs to be absolutely position */
      top:0;
      bottom:0;
      margin:auto;
      width:100%;
      height:20px;/*child's height will change after*/
      background:darkgray;
  }
  </code></pre>