title: Using VueJS and Vuetify how can I vertically and horizontally center a v-switch in v-flex?
body: <p>I cannot seem to center the <code>v-switch</code> component inside a <code>v-flex</code> when elements are oriented in a row.</p>
  
  <p>It feels as though I have tried all of the documented <code>v-container</code>, <code>v-layout</code>, and <code>v-flex</code> props on the <a href="https://vuetifyjs.com/en/framework/grid" rel="nofollow noreferrer">Grid system</a> documentation page and nothing seems to get the job done (i.e. <code>justify-center</code>, <code>text-xs-center</code>, etc).</p>
  
  <p>I have tried the solutions in similar issues to no avail.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/55402215/center-v-switch-inside-a-v-flex">Center v-switch inside a v-flex</a></li>
  <li><a href="https://stackoverflow.com/questions/46404884/vuetify-center-items-into-v-flex?noredirect=1&amp;lq=1">vuetify center items into v-flex</a></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data () {
      return {
        enabled: false
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  &lt;/head&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-container grid-list-xl style="background: IndianRed;"&gt;
        &lt;v-layout text-xs-center row wrap align-center style="height: 100px;"&gt;
  
          &lt;v-flex xs4&gt;
            &lt;v-card color="success"&gt;
              Content
            &lt;/v-card&gt;
          &lt;/v-flex&gt;
  
  &lt;!–– This guy right here --&gt;
          &lt;v-flex xs4&gt;
            &lt;v-switch prepend-icon="cloud" v-model="enabled"&gt;&lt;/v-switch&gt;
          &lt;/v-flex&gt;
  
          &lt;v-flex xs4&gt;
            &lt;v-card color="success"&gt;
              Content
            &lt;/v-card&gt;
          &lt;/v-flex&gt;
  
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>