title: Vertical align with Tailwind CSS across full screen div
body: <p>How can I vertically align a div with Tailwind?
  What I want:</p>
  <pre><code>-----------------------------------
  |                                |
  |                                |
  |                                |
  |             item1              |
  |             item2              |
  |                                |
  |                                |
  |                                |
  -----------------------------------
  </code></pre>
  <p>What I currently have:</p>
  <pre><code>-----------------------------------
  |             item1              |
  |             item2              |
  |                                |
  |                                |
  |                                |
  |                                |
  |                                |
  |                                |
  -----------------------------------
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;flex flex-col h-screen my-auto items-center bgimg bg-cover&quot;&gt;
    &lt;h3 class=&quot;text-white&quot;&gt;heading&lt;/h3&gt;
    &lt;button class=&quot;mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2&quot;&gt;
      call to action
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.bgimg {
      background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
  }
  </code></pre>
  <p>I have successfully centered on the secondary axis (left-right) with class <code>items-center</code>. Reading the documentation, I tried <code>align-middle</code> but it does not work. I have confirmed the divs have full height and <code>my-auto</code>.</p>
  <p>I'm using this version of Tailwind: <a href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="noreferrer">https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css</a></p>
  <p>Here is a JSFiddle: <a href="https://jsfiddle.net/7xnghf1m/2/" rel="noreferrer">https://jsfiddle.net/7xnghf1m/2/</a></p>