使用 tailwindCSS 和 Laravel Nova 仪表板垂直居中加载器

Question

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

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

如果我这样做，h-screen 类将采用屏幕大小，而不采用标题大小和边距。所以，最后，它不会垂直居中。

如果我有办法用 填充我的屏幕，我可以轻松做到

我应该如何让加载器在屏幕中心居中？

这是一个截图：

Answer 1

一小段内联 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 类可以管理这个。