title: Keep images centered when resizing
body: <p>I want to keep the image centered when I resize the browser.</p>
  
  <p><a href="http://jsfiddle.net/hectooorr/8pcjmduk/" rel="nofollow">Check out my fiddle</a></p>
  
  <p>I'm using the following code but everytime I resize the browser, my image does not keep center (x/y). Also it should work with IE9 and up. Any help would be appreciated!</p>
  
  <pre><code>    .container {
      height: 580px;
      width:700px;
      margin: 0 auto;
      z-index: 1;
      overflow: hidden;
      position: relative;
      border:1px solid black;
  }
  .container img {
      position: absolute;
      left: -100%;
      right: -100%;
      top: -100%;
      bottom: -100%;
      margin: auto;
      height: 580px;
  }
  </code></pre>