title: Image in flex container not centering after defining width and height
body: <p>I'm doing some personal portfolio using css flex box. what I'm trying to do is to center the image horizontally, It did center but the problem is after I defined <code>width</code> and <code>height</code> to <code>img</code> the image is at the start or left now not in the center.</p>
  
  <p>This is what it looks like when centered and not defining the <code>width</code> and <code>height</code></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>.center-img{
    border-radius: 50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center-img"&gt;
    &lt;img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user"&gt;
    &lt;h1&gt;User&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is what it look liked after defining <code>width</code> and <code>height</code></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>.center-img{
    width:100px;
    height:100px;
    border-radius: 50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center-img"&gt;
    &lt;img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user"&gt;
    &lt;h1&gt;User&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect that after defining the <code>width</code> and <code>height</code> of the image it would not affect the position of the image. so it should be in the center.
  thank you!</p>