title: How to vertically center an image inside of a div element in HTML using CSS?
body: <p>I have a markup like this:</p>
  
  <pre><code>&lt;div&gt;
    &lt;img /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The div is higher than img:</p>
  
  <pre><code>div {
    height: 100px;
  }
  
  img {
    height: dynamic-value-smaller-than-100px;
  }
  </code></pre>
  
  <p>I need the image to be in the middle of the div (have same amout of white space above and below it).</p>
  
  <p>I tried this and it does not work:</p>
  
  <pre><code>div {
    vertical-align: middle;
  }
  </code></pre>