title: Foundation to Tailwind CSS: central alignment for grid items?
body: <p>How to make the grid items centred align in Tailwind just like we can do that in <a href="https://get.foundation/sites/docs/flexbox-utilities.html#central-alignment" rel="nofollow noreferrer">Foundation</a>?</p>
  <p>Foundation:</p>
  <pre><code>&lt;div class=&quot;grid-x grid-padding-x align-center-middle text-center&quot; style=&quot;height: 200px;&quot;&gt;
    &lt;div class=&quot;cell small-4&quot;&gt;I am in the center-middle&lt;/div&gt;
    &lt;div class=&quot;cell small-4&quot;&gt;I am also centrally located&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What about in Tailwind CSS? What else should I use from TW in the code below?</p>
  <pre><code>  &lt;div class=&quot;grid grid-cols-3 gap-4&quot;&gt;
      &lt;div class=&quot;bg-green-500&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;bg-green-500&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;bg-green-500&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;bg-green-500&quot;&gt;4&lt;/div&gt;
      &lt;div class=&quot;bg-green-500&quot;&gt;5&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>