在 Tailwind CSS 中让 div 填充父 div 的剩余高度

Question

我想将 K 放在卡片中间，但我该怎么做呢？ 我尝试将 items-center 放入第二个 div 不起作用，因为第二个 div 只是字母 K 的高度

<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

Answer 1

你的问题显然不清楚。让我为您提供完成任务的各种可能性。

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="h-min w-full bg-slate-200 text-center text-5xl font-bold">k</div>
  </div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-slate-200 text-5xl font-bold">k</div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="flex h-min bg-slate-200 text-5xl font-bold">k</div>
  </div>
</div>

---

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-slate-200 text-center text-5xl font-bold">k</div>
</div>

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-transparent"><div class="w-full bg-slate-200 text-center text-5xl font-bold">k</div></div>
</div>

Answer 2

这种类型的布局使用网格更容易预测。因为 flex 会尝试填充可用空间的大小，而 grid 不会。

我举了两个例子，一个完全居中，无论图标如何，另一个考虑图标的位置和大小。

https://play.tai​​lwindcss.com/6M290nY1NT

<!-- this is your example -->
<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- fully centered -->
<div class="grid items-center bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="[grid-area:1/1] self-start justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class="[grid-area:1/1] bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- kinda centered -->
<div class="grid items-center [grid-template-rows:auto_1fr] bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class=" justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class=" bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>