I cannot seem to center the `v-switch` component inside a `v-flex` when elements are oriented in a row.

It feels as though I have tried all of the documented `v-container`, `v-layout`, and `v-flex` props on the [Grid system](https://vuetifyjs.com/en/framework/grid) documentation page and nothing seems to get the job done (i.e. `justify-center`, `text-xs-center`, etc).

I have tried the solutions in similar issues to no avail.

* [Center v-switch inside a v-flex](https://stackoverflow.com/questions/55402215/center-v-switch-inside-a-v-flex)
* [vuetify center items into v-flex](https://stackoverflow.com/questions/46404884/vuetify-center-items-into-v-flex?noredirect=1&lq=1)

```js
new Vue({
  el: '#app',
  data () {
    return {
      enabled: false
    }
  }
})
```

```html
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container grid-list-xl style="background: IndianRed;">
      <v-layout text-xs-center row wrap align-center style="height: 100px;">

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

<!–– This guy right here -->
        <v-flex xs4>
          <v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
        </v-flex>

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

      </v-layout>
    </v-container>
  </v-app>
</div>
```