如何将 PrimeVue 面板的内容部分垂直居中？

Question

我正在使用 PrimeVue Panel 元素和 tailwind。

我希望 content 区域垂直居中。我不想改变标题，只改变内容区域。

我尝试将

flex items-center justify-center

放在内部 div 上，但它没有垂直居中。

<Panel header="Keep This Heading Here">
  <div class="flex items-center justify-center">Make this vertically centered</div>
</Panel>

我还尝试将其作为 pass through 添加到内容类中，但它仍然没有垂直居中。

<Panel header="Keep This Heading" pt:content:class="flex items-center justify-center">
  <div>Make this vertically centered</div>
</Panel>

这是一个实时最小复制：https://stackblitz.com/edit/bqzl55-dakehh?file=src%2FApp.vue

我怎样才能做到这一点？

Answer 1

您可以将高度设置为要居中的内容 div，而不是设置面板的高度。我认为你不能在不覆盖一些 primeVue css 类的情况下将该面板居中，因为你的计数的父级没有 100% 的高度。

这里有一个例子：

<template>
  <Panel header="Header">
    <div class="h-[300px] flex items-center">
      Please vertically center this text within the Panel with 300px height. The
      header should not be centered or changed.
    </div>
  </Panel>
</template>

另一个解决方案是使用position:absolute，但我不喜欢使用这种方式。 这里是例子：

<template>
  <Panel header="Header" class="h-[300px] relative">
    <div
      class="absolute top-[50%] transform translate-y-[-50%] bottom-0"
    >
      Please vertically center this text within the Panel with 300px height. The
      header should not be centered or changed.
    </div>
  </Panel>
</template>