title: center image in a square responsive container
body: <p>I have a container (.inner). It contains a square div (.square) and is responsive. I need the image in it to be centered vertically and horizontally. I dont want to use background url property. My html markup:</p>
  
  <pre><code>&lt;div class="thumb"&gt;
      &lt;div class="square"&gt;
          &lt;a href=""&gt;
             &lt;img src=""/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How my square works in css:</p>
  
  <pre><code>.thumb {
      position: relative;
      width: 100%;
      }
  
  .square{
      position:  absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow:hidden;
      display: inline-block;
      vertical-align: middle;
      }
  </code></pre>
  
  <p>At the moment, I added a class to the image with javascript for landscape images to fit both portrait and landscape images with css to the square containers height and width.</p>
  
  <pre><code>img {
      max-width: 100%;
      height: auto;
      width: auto;
      }
  img.landscape {
      max-width: none;
      height: 100%;
      width:auto!important;
      }
  </code></pre>
  
  <p>But i have no ideas how to center them. I already read a lot of articles here but none of them worked. Thanks for help </p>
  
  <p>Here a picture of what im searching for, should also work vertical if possible:
  <img src="https://i.stack.imgur.com/lY44T.png" alt="enter image description here"></p>