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

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 class 将采用屏幕尺寸，而不采用 header 尺寸和边距。所以，最后，它不会垂直居中。

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

加载器如何居中显示在屏幕中央？

截图如下：

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 值以匹配 header 的高度。

可能有更好的方法，但假设您无法访问包含 header 和内容区域的 parent 元素，我想不起 Tailwind class 可以解决这个问题。

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

Vertically center a loader using tailwindCSS with Laravel Nova dashboard

css

tailwind-css