title: How to center div vertically inside of absolutely positioned parent div
body: <p>I am trying to get blue container in the middle of pink one, however seems <code>vertical-align: middle;</code> doesn't do the job in that case.</p>
  
  <pre><code>&lt;div style="display: block; position: absolute; left: 50px; top: 50px;"&gt;
      &lt;div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"&gt;
          &lt;div style="background-color: lightblue;"&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/s663O.png" alt="enter image description here"></p>
  
  <p>Expectation:</p>
  
  <p><img src="https://i.stack.imgur.com/OOIIO.png" alt="enter image description here"></p>
  
  <p>Please suggest how can I achieve that. </p>
  
  <p><a href="http://jsfiddle.net/kqmp1z9m/">Jsfiddle</a></p>