title: align imge on the center of the div
body: <p><strong>html</strong> </p>
  
  <pre><code>&lt;div style="display: block; height: 200px; width: 200px; background-color: red; position: relative"&gt;
    &lt;img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute;"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This fits my image according to my div. What I want is no matter how big or small is image it should be displayed according to div. </p>
  
  <p>If the image is vertical there should be blank space on top and bottom and if it is horizontal then left and right blank space. Image should not be stretched and the height and width of the div should be fixed.</p>
  
  <p>I am able to do this but vertical image is aligned top and horizontal is aligned left. How can I make it on center ?</p>