title: Center image in DIV and hide the overflowing
body: <p>This is kind of an unique case. I am trying to achieve the following:</p>
  
  <ol>
  <li>Square images should be 100% 100%. Basically fill out the entire DIV (which is squared)</li>
  <li>All images should fill out the entire height of the DIV.</li>
  <li>All images should be aligned center</li>
  <li>If they overflow the X-axis, they should overflow and hide</li>
  </ol>
  
  <p><a href="https://jsfiddle.net/cxnyLxfn/2/" rel="nofollow noreferrer">https://jsfiddle.net/cxnyLxfn/2/</a></p>
  
  <pre><code>.image-container {
      position: relative;
      width: 300px;
      height: 300px;
      display: inline-block;
      margin: 20px;
      border: 1px solid black;
      float: left;
      overflow: hidden;
  }
  
  .image-container img {
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>I almost achieved this, except for centering the images no matter what. The Google logo should be centered and the rest look fine as they are. How do I achieve my four requirements?</p>