如何将 Vuetify 快餐栏组件垂直对齐到中心？答案

【问题标题】：How to align Vuetify snackbar component vertically to the center?如何将 Vuetify 快餐栏组件垂直对齐到中心？
【发布时间】：2021-01-18 08:30:42
【问题描述】：

我需要垂直和水平对齐Vuetify组件

版本

vue 2.6.10 验证 2.1.10

这是组件Snackbar的当前代码

<v-snackbar
    class="no-shadow"
    v-model="snackbarShow"
    :color="snackbarType"
    :timeout="snackbarTimeout"
>
  <v-icon class="mr-3">{{ snackbarIcon }}</v-icon>
  <div>{{ snackbarText }}</div>
  <v-btn text icon color="white" @click="snackbarShow = false">
    <v-icon color="white">mdi-close-circle</v-icon>
  </v-btn>
</v-snackbar>

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

snackbar 难以垂直对齐的原因基本上是因为它不是为此而设计的。 Vuetify 只是 Google 的 Material Design 规范的一种实现。就个人而言，我喜欢 Vuetify 并经常使用它，但请记住它只是一个组件库，因此他们的文档主要关注如何使用组件，没有关于 em>使用哪个组件或您何时应该或不应该 使用特定的组件。这就是为什么我总是参考 material.io 来获取这些信息，以确保我不只是以破坏 材料的方式拼凑材料组件设计规则。

正如您在此处看到的：https://material.io/components/snackbars 小吃店应该专门位于屏幕底部。

要获得您想要的样式，您想要在 Vuetify 库中使用的 UI 组件是 v-dialog。 https://vuetifyjs.com/en/components/dialogs/ 在它的核心，它只是将一个组件（通常是一张卡片）水平和垂直居中，同时提供一种简单的方法来将其可见性绑定到一个道具，甚至给你一个hide-overlay 道具。因此，使用该组件，您可以获得您所追求的风格，几乎是“开箱即用”。只需确保将组件放置在 UI 的死点不会导致糟糕的用户体验。 Material.io 在为正确的任务选择正确的组件方面有一些出色的指导：https://material.io/components/dialogs#usage

【讨论】：

我的意思是，您仍然可以将小吃店居中。而且它甚至不难，只需添加 centered 属性即可。

【解决方案2】：

您需要在组件上使用centered 属性：

<v-snackbar centered />

【讨论】：

拥有 centered 属性只会水平对齐，而不是垂直对齐，也就是说，我停留在中心，但在页面底部
@JorgeGatica Positions the snackbar in the center of the screen, (x and y axis). vuetifyjs.com/en/api/v-snackbar/#props
虽然centered 确实应该与absolute 配对，垂直居中......我遇到了将absolute 与centered 一起使用不起作用的问题。因此，如果它仍然保持在顶部/底部，请尝试移除 absolute 属性以使其居中。