垂直居中对齐

Question

我有一个响应的两列布局页面。当屏幕缩小到平板大小时，它就变成了单列布局，其中第一列不再可见。我在第二个div中添加了一个div，我想让它垂直居中对齐。

我正在使用顺风和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类使文本垂直居中。

Answer 2

将relative,-translate-y-1/2和top-[50%]应用于div内部

你可以在这里使用CSS找到类似的解决方案。

因为我们想在更小的屏幕上应用这些实用程序(使用lg:断点前缀)，我们需要在更大的屏幕上设置默认值。我们有两种选择，要么在内部div上应用所有实用程序，包括默认的。要么创建一个自定义类。通过创建自定义类，我们将拥有一个更清晰的类列表。

---

直接在内部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>

Tailwind-play

---

创建自定义类:

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;
}
}

Tailwind-play

你可以在这里阅读更多关于添加自定义类的信息。