title: Can't get v-img to center inside v-flex
body: <p>I'm new to Vue and Vuetify and I'm trying to build a login screen. I can't get v-img to center inside of v-flex. I've tried a lot of things, but am really stuck. I'm referring to the Vue logo in the right v-flex.</p>
  <p><a href="https://i.stack.imgur.com/K9Ypf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K9Ypf.png" alt="enter image description here" /></a></p>
  <p>I can't get the snippet to show exactly as the image above, but I don't think it really matters as the Vue logo isn't centered either in the snippet. If there is a better way to create the setup as shown in the image I would really like to know. As I said, i'm new to this and still learning.</p>
  <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',
    vuetify: new Vuetify(),
    data: () =&gt; ({
        showPassword:false
      }),
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/&gt;
  
  
  &lt;div id="app"&gt;
    &lt;v-app style="
      background-color: #011c40;
      background-image: linear-gradient(180deg,  #011c40 50%,  rgb(26, 65, 115) 100%);
      background-size: cover;
    "&gt;
      &lt;v-main&gt;
         &lt;v-container  class="fill-height"
                 fluid&gt;
      &lt;v-row&gt;
        &lt;v-col cols="12"&gt;
          &lt;v-row
                  justify="center"
          &gt;
            &lt;v-card tile&gt;
              &lt;v-layout align-center&gt;
                &lt;v-flex xs6 class="hidden-sm-and-down"&gt;
                  &lt;v-img src="http://www.dpereira.nl/Er/img/banner.png" width="500px"&gt;&lt;/v-img&gt;
                &lt;/v-flex&gt;
                &lt;v-flex class="pa-10 pb-8 text-center"&gt;
                  &lt;v-img class="" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="100px"&gt;&lt;/v-img&gt;
                  &lt;v-card-text class="pb-0"&gt;
                    &lt;v-form&gt;
                      &lt;v-text-field
                              label="Gebruikersnaam"/&gt;
                      &lt;v-text-field
                              :type="showPassword ? 'text' : 'password'"
                              label="Wachtwoord"
                              :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                              @click:append="showPassword = !showPassword"
                      /&gt;
                      &lt;v-checkbox dense label="Onthoud mij"&gt;&lt;/v-checkbox&gt;
                    &lt;/v-form&gt;
                  &lt;/v-card-text&gt;
                 &lt;v-card-actions&gt;
                  &lt;v-btn height="50px" tile ripple depressed block color="secondary"&gt;Inloggen&lt;/v-btn&gt;
                 &lt;/v-card-actions&gt;
                  &lt;v-divider&gt;&lt;/v-divider&gt;
                  &lt;div class="pt-3"&gt;
                    &lt;div class="d-block caption text-center"&gt;&lt;a href=""&gt;Wachtwoord vergeten?&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="d-block caption text-center"&gt;Nog geen account? Meld u &lt;a href=""&gt;hier&lt;/a&gt; aan.&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/v-card&gt;
          &lt;/v-row&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-container&gt;
      &lt;/v-main&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>