Center v-card vertically and horizontally in Vuetify 3.0

[MrGonzo1024]

Hi All,

Sorry for the newbie question and apologize if this has been asked before. I did try searching but didn't see an answer. I'm trying to center a v-card on the page both vertically and horizontally using Vuetify 3.0. "mx-auto" centers it horizontally but not vertically. I'm finding tons of examples out there for Vuetify 2.0 or lower, but none of them seem work with Vuetify 3.0. Is there a standard way to do it in Vuetify 3.0?

Thanks!

[yuwu9145]

What about using flex utility classes:

demo

[MrGonzo1024]

Thank you so much @yuwu9145 ! It worked! I have tried using class="d-flex justify-center align-center" before, but on v-sheet, v-container or div tags and none of those worked. I guess it needed to be on v-main? I see I need to learn more about the flex utility classes.

[yuwu9145]

It's nothing about v-main, flex utility classes is enough achieve it. You just need to make sure container element occupies full page height and width

[MrGonzo1024]

I see. Thank you so much @yuwu9145