title: Place div on top of image that is centered
body: <p>I have a markup that looks like this:</p>
  
  <pre><code>&lt;div style="width: 150px; height: 250px;"&gt;
      &lt;img src="Image1.jpg" /&gt;
  
      &lt;div class="YellowExclaimIcon iconsBlack"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve is below:</p>
  
  <p><img src="https://i.imgur.com/AZRzQ.jpg" alt="Result"></p>
  
  <p>Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.</p>
  
  <p>Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.</p>
  
  <p>The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.</p>
  
  <p>I tried with the answer in this thread <a href="https://stackoverflow.com/questions/8769830/css-help-div-over-image">CSS Help - div over image</a> but I could't get it to work with the centering.</p>