title: Horizontally align img & text?
body: <p>Taking baby steps with web development.  I have an application that has a loader screen very similar to <a href="http://jsfiddle.net/jakc/z3zpz/" rel="nofollow">this Fiddle</a>.</p>
  
  <p>On a Desktop browser it looks acceptable with the text/image vertically and horizontally centered (to the eye anyhow).</p>
  
  <p>However, when you view my application on smaller screen sizes, the text/image begin to not align horizontally to the center of the screen.</p>
  
  <p>I have been reading many related posts and blogs but have been unable to get my text/image to stay centered, regardless of device width. This can be replicated by resizing the <a href="http://jsfiddle.net/jakc/z3zpz/" rel="nofollow">fiddle</a> preview to make it thinner.</p>
  
  <pre><code>&lt;div id="preloader"&gt;
  &lt;div class="preloaderContent"&gt;
      &lt;div id="loadLabel"&gt;Please Wait&lt;/div&gt;
      &lt;img src="http://www.igfa.org/images/throbber.gif"&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #preloader {
      display: table;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin:0;
      padding:0;
      background:#3399FF;
      z-index:999;
  }
  
  .preloaderContent {
      position: absolute;
      left: 45%;
      top: 40%;
  }
  
  .preloaderContent img {
      display : block;
      margin : auto;
      text-align: center;
  }
  
  #loadLabel {
      padding-bottom: 10px;
      font-size: 30px;
      font-weight: 300;
      font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif';
      color: #FFFFFF; 
      text-align: center;
  }
  </code></pre>
  
  <p>Apologies it is a bit of a mess.  Can someone point out the error(s) in my ways?</p>