Tailwind CSS で親 div の残りの高さを div で埋めるようにする

Question

キングをカードの中央に配置したいのですが、どうすればよいですか? items-center を 2 番目の div に入れようとしましたが、2 番目の div が文字 K

の高さだけであるため、機能しませんでした。

<div class="bg-orange-200 w-48 h-48shadow-mdrounded-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

あなたの質問は明らかに不明確です。あなたのタスクを完了するためのさまざまな可能性を提供させてください。

リーリー

---

リーリー

---

リーリー

---

---

リーリー

---

リーリー

Answer 2

このタイプのレイアウトは、グリッドを使用するとより予測しやすくなります。フレックスは利用可能なスペースを埋めようとするため、グリッドは埋めません。

2 つの例を示しました。1 つはアイコンに関係なく完全に中央に配置され、もう 1 つはアイコンの位置とサイズを考慮します。

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

リーリー