title: img positioning inside div container
body: <p>Can't get <strong>img</strong> inside "head-logo" div to center both vertically amd horizontaly. </p>
  
  <p>i tryed CSS solutions like:</p>
  
  <p>1) </p>
  
  <pre><code>.head-logo img  {
      margin-left: auto;
      margin-right: auto;
      display: block;
  }
  </code></pre>
  
  <p>2) </p>
  
  <pre><code>.head-logo img {
  vertical-align: middle;
  }
  </code></pre>
  
  <p>3)</p>
  
  <pre><code>    .head-logo img  { 
      display: -webkit-flex;
      display: -ms-flex; 
      display: flex; 
      justify-content: center; 
      -ms-align-items: center; 
      align-items: center; 
      }
  </code></pre>
  
  <p>etc</p>
  
  <pre><code>&lt;div class="head-container"&gt;
      &lt;div class="head-logo"&gt;
          &lt;img src="img\logo.svg" height="70" width="70"&gt;
      &lt;/div&gt;
      &lt;div class="head-menu"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
              div {
                  border: dotted 1px;
              }
              .head-container {
                  width: 80%;
                  height: 100px;
                  margin: auto;
                  padding: 5px;
                  background-color: aqua;
              }
              .head-logo {
                  vertical-align: middle;
                  width: auto;
                  height: 100px;
                  background-color: red;
                  float: left;
              }
              .head-logo img {
  
              }
  </code></pre>
  
  <p>Current result is <strong>img</strong> is stuck to upper left corner of parent div, and I need it centered from all sides.</p>
  
  <p>Probably I'm missing something, quite new to css, looking forward for your help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>           div {
                  border: dotted 1px;
              }
              .head-container {
                  width: 80%;
                  height: 100px;
                  margin: auto;
                  padding: 5px;
                  background-color: aqua;
              }
              .head-logo {
                  vertical-align: middle;
                  width: auto;
                  height: 100px;
                  background-color: red;
                  float: left;
              }
              .head-logo img {
  
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="head-container"&gt;
      &lt;div class="head-logo"&gt;
          &lt;img src="https://via.placeholder.com/150x200/O%20https://placeholder.com/" height="70" width="70"&gt;
      &lt;/div&gt;
      &lt;div class="head-menu"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>