title: Centering a pre-loader inside an image
body: <p>I have a pre-loader, which is already centred inside an image. The pre-loader shows and then disappears when the image is loaded.</p>
  
  <p>The thing I'm concerned about is that the pre-loader is only centred once the image loads. So before the image loads, the pre-loader is at the top of the div, then when the image loads, the pre-loader jumps down and then disappears.</p>
  
  <p>This is ok as it still gives the user feedback but it's more of an aesthetic thing...and it's something I'm wondering about myself.</p>
  
  <p>I understand the logic...the image isn't loaded, therefore the div that contains the image and spinner isn't stretched to accommodate the image and therefore the pre-loader isn't going to be at the 'right' place. </p>
  
  <p>When I see a pre-loader, it normally sits in the centre of a container already for the image, then the image loads. So it's as if there is a container set up already that acts as if the image is loaded.</p>
  
  <p>Here is my code for example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class="work_item_link" href="#"&gt;                            
          &lt;div class="spinner"&gt;LOAD&lt;/div&gt;
          &lt;img src="http://i.huffpost.com/gen/1856788/thumbs/o-IMAGE-PHOTOSHOP-570.jpg?1"&gt;                           
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.spinner {
      font-size: 5em;
      font-weight: bold;
      color: black;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  .work_item_link {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      //margin-bottom: 1em;
      overflow: hidden;
  }
  img {
      width: 100%;
      height: auto;
      display: block;
  }
  </code></pre>
  
  <p>Here is a jsfiddle: <a href="http://jsfiddle.net/t8rjs25j/" rel="nofollow">http://jsfiddle.net/t8rjs25j/</a></p>
  
  <p>Any input would be appreciated here.</p>