[Vue] 화면 정중앙에 요소를 추가하는 방법

목표

- 표시될 영역의 정중앙에 요소를 추가

 

해결

- <v-container> 을 영역 내에 가득 채우기

- height="100vh" : 화면 view height 기준 꽉 채우기

- d-flex align-center justify-center : 수평 수직 중앙으로 정렬

<template>
  <v-container
    height="100vh"
    class="d-flex align-center justify-center"
  >
    중앙!
  </v-container>
</template>

---

참고

https://vuetifyjs.com/en/api/v-container/

https://vuetifyjs.com/en/api/v-container/