title: Center text vertically in grid with tailwindcss
body: <p>I was trying to create a responsive grid layout with <em>tailwindcss</em> but I could not center the texts vertically in grid. All I could do was center the text horizontally with <code>text-center</code>.</p>
  <pre><code>&lt;body&gt;
    &lt;div class=&quot;grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center &quot;&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
      ...
      &lt;div class=&quot;border-2 rounded-lg h-20 lg:h-32&quot;&gt;Text&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Demo in <a href="https://codepen.io/farhan2077/pen/JjXOgjM" rel="nofollow noreferrer">codepen</a></p>