title: align span in the middle of a fixed size div
body: <p>I have a fixed size div with a background image, and I want text to be aligned directly in the middle. Vertically and horizontally. </p>
  
  <p>I'm able to get the horizontal alignment, but can't for the life of me get it to be vertically aligned. I've seen answers on here, but couldn't find anything that worked for a fixed size div. </p>
  
  <p>You can see the blue border around the span. If I could just move that down to be always centered for any text(as long as it doesn't get too big) I'd be there.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      background-image: url(http://i.imgur.com/I86rTVl.jpg);
      width: 500px;
      height: 300px;
      border: 1px solid red;
      
  }
  
  span {
      position: absolute;
      text-align: center;
      width: 500px;
      border: 1px solid blue;
      font-size: 72px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;div&gt;
    &lt;span&gt;Testing for fiddle&lt;/span&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>