[Vuejs]-How to align Vuetify snackbar component vertically to the center?

v2

<v-snackbar centered />

v3

<v-snackbar v-model="snackbar" timeout="5000" location="center">

The reason a snackbar is difficult to align vertically is basically because it is not designed to do this. Vuetify is just one implementation of Google’s Material Design specification. Personally, I love Vuetify and use it a lot, but remember it’s just a component library, so their documentation primarily focuses on how to use the components, with no guidance on which component to use or when you should or shouldn’t use a particular component. That’s why I always reference material.io for that information, to make sure I’m not just piecing together material components in a way that breaks material design rules.

As you can see here: https://material.io/components/snackbars snackbars are specifically supposed to be at the bottom of the screen.

To get the style you’re after, the UI component you want in the Vuetify library is v-dialog. https://vuetifyjs.com/en/components/dialogs/
At its heart, it just centers a component (usually a card) horizontally and vertically, while providing an easy way to bind its visibility to a prop and even gives you a hide-overlay prop. So using that component, you could get the style you’re after, pretty much ‘out of the box.’
Just make sure that placing a component in the dead center of the UI doesn’t make for a bad UX. Material.io has some excellent guidance in picking the right component for the right task: https://material.io/components/dialogs#usage