點燈坊

學而時習之,不亦悅乎

Vuetify 之同時水平垂直置中

Sam Xiao's Avatar 2019-07-09

CSS 要同時水平垂直置中,需同時使用 justify-contentalign-items,Vuetify 則要同時使用 justify-centeralign-center props。

Version

macOS Mojave 10.14.5
Node 12.4.0
Vue CLI 3.8.4
Vue 2.6.10
Vuetify 1.5.5
CSS 3
Chrome 75.0.3770.100

Chrome

center000

Hello World 同時 水平置中垂直置中 於頁面中心。

center001

儘管改變 browser 的 width 與 height,Hello World 一樣維持在頁面中心。

Vue File

App.vue

<template>
  <v-container fluid class="box">
    <v-layout row justify-center align-center class="rows">
      <v-flex shrink>Hello World</v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
.box {
  height: 100vh
}

.rows {
  height: 100%;
}
</style>

第 2 行

<v-container fluid class="box">
  <v-layout row justify-center align-center class="rows">
    <v-flex shrink>Hello World</v-flex>
  </v-layout>
</v-container>

Vuetify 的 grid system 依次使用 <v-container><v-layout><v-flex>,先將外層 <v-layout> 水平置中,再將 <v-flex> 垂直置中。

row 表示 <v-flex>由左至右 顯示,相當於 CSS 的 flex-direction: row

justify-center 表示 main axis 置中,相當於 CSS 的 justify-content: center,也就是 水平置中

align-center 表示 cross axis 置中,相當於 CSS 的 align-items: center,也就是 垂直置中

<v-flex> 寬度使用 shrink props,也就是其寬度由內文 Hello World 決定,避免使用 breakpoint 時 置中 不是很準。

boxrows 為自訂 class,用來設定 height

實務上建議 Vuetify 的 CSS class 使用 props;而自己寫的 CSS class 則使用 class

<v-container fluid class="box">
  <v-layout column justify-center align-center class="rows">
    <v-flex shrink>Hello World</v-flex>
  </v-layout>
</v-container>

同理,也能先 垂直置中 然後 水平置中,只要將 row props 改成 column ,其餘不變。

Conclusion

  • 無論先 水平置中垂直置中 皆可,重點是 justify-center 處理 main axis 置中,而 align-center 處理 cross axis 置中

Reference

Vuetify, Grid system