title: How to center text in a div vertically?
body: <p>I've centered my text in my <code>div</code> but I've only managed to center it horizontally by using <code>text-align: center</code>
  However I'm having trouble centering the text vertically. I've tried using <code>vertical-align: middle;</code> but it didn't work </p>
  
  <p>Here is a codepen: <a href="http://codepen.io/anon/pen/Ioiaq" rel="nofollow">http://codepen.io/anon/pen/Ioiaq</a></p>
  
  <p>the code with the text is right at the bottom of the html panel the text is "INFO"</p>
  
  <p>and here's the code so far: </p>
  
  <pre><code>&lt;div id="inf" style="
                       text-align:center;  
                       background-color: white; 
                       position: absolute; top:50%; left: 45%; width: 10%; height: 6%; 
                       z-index: 10;  
                       display: inline-block;"&gt;
  
    &lt;a href="#"&gt;&lt;span&gt;INFO&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>any ideas?</p>
  
  <p>I don't mind what code is used to fix the alignment it doesn't have to be css.</p>