Comment faire un centre de mise en page comme ceci dans Vuetify ou la Conception de Matériel?

Ce ne sera pas une grande réponse, car je ne suis pas familier avec Vuetify. Cependant, je peux vous dire comment faire le centrage de ce que vous voulez faire.

La flexbox est très utile CSS type d'affichage. Je remarque que Vuetify l'utilise pour beaucoup de leur mise en page.

Ce que vous voulez, c'est un bloc centré dont le contenu est justifié à gauche. Vous pouvez l'obtenir en ayant une pleine largeur du conteneur avec ces CSS paramètres:

{
  display: flex;
  justify-content: center;
}

et, en son sein, dans un autre récipient avec ces paramètres:

{
  justify-content: flex-start;
  max-width: 600px; //or however wide you want your content block to be
  width: 100%;
}

(un pré-flexbox façon de centre de ce conteneur est d'avoir des marges gauche et droite ensemble de auto)

Dans l'extrait de code ci-dessous, que j'ai coloré l'arrière-plan de l'centrée sur les blocs de sorte que vous pouvez voir où ils sont. Les arrière-plans ne sont pas alignés car le toolbar__title classe est donnée une margin-left par Vuetify, mais le texte s'aligne raisonnablement bien.

Vous voulez cliquez sur la "Pleine page" lien puis redimensionner la fenêtre pour voir la mise en page dans l'action.

JS:

new Vue({
  el: '#app',
  data: {
    tabArray: ['Home', 'Feed']
  }
})

CSS:

.toolbar__extension,
.tabs__wrapper {
  display: flex;
  justify-content: center;
}

.toolbar__title,
.tabs__container {
  background-color: rgba(255, 255, 255, 0.2);
  justify-content: flex-start !important;
  max-width: 600px;
  width: 100%;
}

HTML:

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <main>
      <v-tabs dark fixed centered>
        <v-toolbar extended class="cyan" dark>
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>search</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>more_vert</v-icon>
          </v-btn>

          <v-toolbar-title slot="extension" class="display-2 centered">Share My Pic</v-toolbar-title>

        </v-toolbar>
        <v-tabs-bar slot="activators" class="cyan ">
          <v-tabs-slider class="yellow">Slider</v-tabs-slider>
          <v-tabs-item v-for="i in tabArray" :key="i" :href="'#tab-' + i">
            {{i}}
          </v-tabs-item>
        </v-tabs-bar>
        <v-tabs-content v-for="i in 3" :key="i" :id="'tab-' + i">
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tabs-content>
      </v-tabs>
    </main>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>