title: vertical align middle wont vertical align middle when the div is a fixed height
body: <p>See below:</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>.fixed-height {
    height: 100px;
    background-color: green;
  }
  
  .fixed-height h1 {
    font-size: 14px;
    color: red;
    display: inline;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-height"&gt;
    &lt;h1&gt;VERTICAL ALIGN ME&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align</a></p>
  <blockquote>
  <p>The vertical-align CSS property sets vertical alignment of an inline,
  inline-block or table-cell box.</p>
  </blockquote>
  <p><a href="https://stackoverflow.com/questions/14695857/vertically-align-a-header-tag-with-fixed-height-through-css">Vertically Align a Header Tag with Fixed Height through CSS</a></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>/* 
  This https://stackoverflow.com/questions/14695857/vertically-align-a-header-tag-with-fixed-height-through-css
  
  but it doesnt work either, it cuts the div short and isn't in the middle
  
  */
  
  .fixed-height {
    height: 100px;
    background-color: green;
    display: inline-table
  }
  
  .fixed-height h1 {
    font-size: 14px;
    color: red;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-height"&gt;
    &lt;h1&gt;VERTICAL ALIGN ME&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <ol>
  <li>howcome the box is getting cut short?</li>
  <li>Howcome it wont go to the middle?</li>
  </ol>
  <p>so I know that I can just do:</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>/* 
  Flex Version
  */
  
  .fixed-height {
    height: 100px;
    background-color: green;
    display: flex;
    align-items: center;
  }
  
  .fixed-height h1 {
    font-size: 14px;
    color: red;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-height"&gt;
    &lt;h1&gt;VERTICAL ALIGN ME&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Which is what I did to get this done ASAP...</p>
  <p>but I want to know why vertical align doesn't work when it's an inline element or inline box like documentation says.</p>