使用tailwindCSS和Laravel Nova仪表板将装载机垂直居中

我有一个空页面，我想在重定向之前显示一个加载程序

 <template>
    <span class="flex flex-col items-center justify-center h-screen ">
        <atom-spinner
            :animation-duration="1000"
            :size="160"
            :color="'#1f6492'"
        />
    </span>
</template>

<script>
import {AtomSpinner} from 'epic-spinners'

export default {
    props: [
        'card',
    ],
    components: {
        AtomSpinner
    },

    mounted() {
    },
}
</script>

一小段内联CSS可能会起到以下作用：

<span class="flex flex-col items-center justify-center" style="height:calc(100% - 60px);">
  <atom-spinner
    :animation-duration="1000"
    :size="160"
    :color="'#1f6492'"
  />
</span>



应调整
60px
值以匹配收割台的高度

也许有更好的方法，但假设您没有访问包装标题和内容区域的父元素的权限，我想不起有哪个Tailwind类可以处理这个问题。
您可以选择其中一个吗？并共享链接。我分叉了它，但它不是Vue，我不知道如何使它工作：（是的，它成功了！我必须补充！重要的是，它能工作。