title: Vue.js - Vuetify layout issue with v-card
body: <p>When I insert a text inside a v-card-text tag ,the v-card is <a href="https://i.stack.imgur.com/fG4iQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fG4iQ.png" alt="centered"></a> centered in all viewports</p>
  
  <p><strong>html</strong> </p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh"&gt;
        &lt;v-layout row wrap align-center justify-center&gt;
          &lt;v-flex xs6 offset xs-1 sm6 offset-sm1 md6 offset-md1&gt;
              &lt;v-card class="elevation-0"&gt;
                &lt;v-card-title primary-title class="layout justify-center"&gt;
                  &lt;h1&gt;TITLE&lt;/h1&gt;
                  &lt;/v-card-title&gt;
                &lt;v-card-text&gt;
                  ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
                &lt;/v-card-text&gt;
              &lt;/v-card&gt;
           &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-parallax&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.parallax {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .card__text {
    font-size: 1.2em;
    padding-top: 0;
    padding-bottom: 7%;
  }
  </code></pre>
  
  <p>see <a href="https://codepen.io/erwin16/pen/yEKEmr" rel="nofollow noreferrer">codepen</a></p>
  
  <p>HOWEVER , if I insert a button inside the v-card-text tags, then the behavior is nor the same, <a href="https://i.stack.imgur.com/K1Wx6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K1Wx6.png" alt="not centered"></a> , not centered</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh"&gt;
        &lt;v-layout row wrap align-center justify-center&gt;
              &lt;v-card class="elevation-0"&gt;
                &lt;v-container&gt;
                  &lt;v-layout column align-center justify-center &gt;
                &lt;v-card-title primary-title&gt;
                  &lt;h1&gt;TITLE&lt;/h1&gt;
                  &lt;/v-card-title&gt;
                &lt;v-card-text&gt;
                  &lt;v-btn round class="primary" large href="#"&gt;SIGN UP&lt;/v-btn&gt;
                &lt;/v-card-text&gt;
                    &lt;/v-layout
                  &lt;/v-container&gt;
              &lt;/v-card&gt;
        &lt;/v-layout&gt;
      &lt;/v-parallax&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.parallax {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .card__text {
    font-size: 1.2em;
    padding-top: 0;
    padding-bottom: 7%;
  }
  </code></pre>
  
  <p>see <a href="https://codepen.io/erwin16/pen/MXGWjN" rel="nofollow noreferrer">codepen</a> </p>
  
  <p>How can I auto center the v-card with the title / button in all viewports ?</p>
  
  <p>thanks for feedback ..</p>
  
  <p>btw , is there any good link to vuetify layout examples / tuts ???</p>