title: Vertical middle alignment of text not working
body: <p>I want to vertically middle align text in a div that has height in percentage. The code i am using is this.</p>
  
  <p>CSS-</p>
  
  <pre><code>.div{
      position: fixed;
      left: 0px;
      border-radius: 10px;
      height: 6%;
      width: 20%;
      transform: translate(-10px,0px);
      -ms-transform: translate(-10px,0px);
      -webkit-transform: translate(-10px,0px);
      -o-transform: translate(-10px,0px);
      -moz-transform: translate(-10px,0px);
      z-index: 10
  }
  .div span {
      text-align: center;
      font: 20px/100% Arial, Helvetica, sans-serif;
      text-decoration: none;
      color: #fff;
      display: block;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>HTML-</p>
  
  <pre><code>&lt;div class="div"&gt;&lt;span&gt;This is some text.&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This isnt working. Please help.</p>