title: how to vertical align dynamic height
body: <p>I'm trying to center align a floating div inside a fixed div with a dynamic height.
  is there any way to do it without define the height anywhere but the fixed parent div?</p>
  
  <p>here is the HTML code:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="child"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the css:</p>
  
  <pre><code>.main{
      position:fixed;
      height:100px;
      top:0px;
      width:100%;
      background-color:yellow;
  }
  
  .child{
      display:table-cell;
      height:100%;
      vertical-align:middle;
      width:100px;
      background-color:lightblue;
      float:left;
  }
  </code></pre>
  
  <p>here is a fiddle with it: <a href="http://jsfiddle.net/KS523/" rel="nofollow">the link to the jsFiddle</a></p>
  
  <p>Thanks :)</p>