使用 Tailwindcss 在网格中垂直居中 div答案

【问题标题】：Vertically center a div in grid using Tailwindcss使用 Tailwindcss 在网格中垂直居中 div
【发布时间】：2023-01-19 03:04:56
【问题描述】：

我试图将 CSS Grid 中的 div 水平和垂直居中。我正在使用 TailwindCSS v3。使用 mx-auto，我可以水平对齐内容，但是 align-middle 和 flexbox 没有显示任何结果。我在下面附上代码 sn-p。

<div className="grid grid-cols-6 mb-2">
  <div className="col-span-1">
    <div className="flex align-middle">
      <ImLocation className="text-lg text-black mx-auto" />
    </div>
  </div>

  <div className="col-span-5">
    <p className="text-sm md:text-base text-black">
      Address Line 1, <br />
      Address Line 2, <br />
      Address Line 3
    </p>
  </div>
</div>

这里的问题是第一个 inner-div（类为col-span-1）的高度小于另一个 div。我希望那个 div 在中心与另一个 div 垂直对齐。 ImLocation 是我用过的一个 React 图标。

【问题讨论】：

标签： css flexbox css-grid tailwind-css tailwind-3

【解决方案1】：

使用 items-center 和 justify-center 如下：

<div className="grid grid-cols-6 mb-2">
    <div className="col-span-1">
        <div className="flex flex-row items-center justify-center">
            <ImLocation className="text-lg text-black mx-auto" />
        </div>
    </div>

    <div className="col-span-5">
        <p className="text-sm md:text-base text-black">
            Address Line 1, <br />
            Address Line 2, <br />
            Address Line 3
        </p>
    </div>
</div>

【讨论】：

【解决方案2】：

<div class="flex justify-center items-center h-full">
  <!-- Your content here -->
</div>

要使元素在其父容器中居中，请使用 Tailwind CSS 的 flex、justify-center 和 items-center 类。 “flex”类指示元素显示为灵活的容器，而“justify-center”和“items-center”类分别将项目居中。上面的 sn-p 代码将 div 元素在其父容器中水平和垂直居中。

为了使这段代码工作，父容器必须配置一个相对于上面的 div 的位置。

完整代码：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-6 mb-2">
  <div class="col-span-1">
    <div class="flex justify-center items-center h-full">
      your content
    </div>
  </div>

  <div class="col-span-5">
    <p class="text-sm md:text-base text-black">
      Address Line 1, <br />
      Address Line 2, <br />
      Address Line 3
    </p>
  </div>
</div>

Explore the details on how to center an element using Tailwind CSS

【讨论】：