在一個 div 內垂直居中對齊一個 div

Question

我有一個響應式兩列布局頁面。 當屏幕尺寸縮小到平板電腦時，它變成單列布局，第一列將不再可見。 我在第二個 div 中有一個 div，我希望它垂直居中對齊。

我正在使用 tailwind 和 flexbox。

到目前為止，這是我的代碼

    <div className="flex min-h-full">
      <div className="flex-none w-1/3 min-h-full hidden lg:block">
        01
      </div>
      <div className="grow md:bg-slate-100 h-screen">
         <div className="bg-red-400 h-3/5 mx-16"></div>
      </div>
    </div>

我嘗試了各種選擇，但我正在努力讓內部 div 居中對齊。 目前它堅持頂部。

Answer 1

如果您使用順風，則可以使用align-middle class 使文本垂直居中。

Answer 2

在內部div上應用relative 、 -translate-y-1/2和top-[50%] 。

您可以在此處使用 CSS 找到類似的解決方案。

因為我們想在較小的屏幕上應用這些實用程序（使用lg: breakpoint 前綴），所以我們需要在較大的屏幕上設置默認值。 我們有兩個選擇，要么在內部 div 上應用所有實用程序，包括默認實用程序。 或者，我們創建一個自定義的 class。通過創建一個自定義的 class，我們將擁有一個更清晰的類列表。

---

直接在內部 div 上應用實用程序：

<div class="flex min-h-full">
  <div class="hidden min-h-full w-1/3 flex-none lg:block">01</div>
  <div class="h-screen grow md:bg-slate-100 ">
    <div class="mx-16 h-3/5 bg-red-400 relative lg:block -translate-y-1/2 lg:-translate-y-0 top-[50%] lg:top-0"></div>
  </div>
</div>

順風游戲

---

創建自定義 class：

HTML：

<div class="flex min-h-full">
  <div class="hidden min-h-full w-1/3 flex-none lg:block">01</div>
  <div class="h-screen grow md:bg-slate-100 ">
    <div class="mx-16 h-3/5 bg-red-400 responsive-align"></div>
  </div>
</div>

CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
   .responsive-align {
     @apply relative lg:block -translate-y-1/2 lg:-translate-y-0 top-[50%] lg:top-0;
   }
}

順風游戲

您可以在此處閱讀有關添加自定義類的更多信息。