javascript - 在Vuetify上将内容垂直居中(Center content vertically on Vuetify)

Question

Is there a way to center content vertically in Vuetify?(有没有办法在Vuetify中将内容垂直居中？)

With the text-xs-center helper class, the content gets centered horizontally only:(使用text-xs-center帮助器类，内容仅在水平方向居中：) <v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </v-layout> From the API , I tested some other helper classes such as align-content-center but did not achieve the result.(从API中 ，我测试了其他一些帮助器类，例如align-content-center ，但未实现结果。)   ask by Billal Begueradj translate from so

Answer 1

You could use align-center for layout and fill-height for container.(您可以将align-center用于layout并将fill-height用于容器。)

DEMO(演示) new Vue({ el: '#app' }) .bg{ background: gray; color: #fff; font-size: 18px; } <link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script> <div id="app"> <v-app> <v-container bg fill-height grid-list-md text-xs-center> <v-layout row wrap align-center> <v-flex> Hello I am center to vertically using "align-center". </v-flex> </v-layout> </v-container> </v-app> </div>