title: Put image in front and center of div
body: <p>I have seen many variations of this question, but have not found any desirable answer.</p>
  
  <p>I would like to put center an image in front of a <code>div</code>.</p>
  
  <p>If I have a <code>div</code> that is loading ajax content, I will (using <code>css</code>, <code>jquery</code>, however) put an image in front of the <code>div</code> that is loading, and then remove it when the <code>div</code> is done loading. Now, although that is the situation, the solution should not be constrained to this specific situation. Hopefully I (and anyone else) will be able to do this whenever they need to overly an image on a <code>div</code>.</p>
  
  <p>That is the salient point. I do not want to grey out the whole screen and put the image in the center of the window, or put it below, or to the side, or at an absolute position. Those things are relatively simple. I want the image smack-dab in the middle of the given <code>div</code>, wherever that <code>div</code> may happen to be.</p>
  
  <p>NOTE: I would prefer solutions that do not require an additional <code>jquery</code> plugin. I would like to use as little code as possible to get the job done.</p>