title: iron-flex-layout center in page
body: <p>I am trying to vertically and horizontally center a paper-card and can't figure out where I am going wrong:</p>
  
  <pre><code>&lt;body unresolved&gt;
      &lt;div class="flex-vertical"&gt;
          &lt;div class="flex-horizontal"&gt;
              &lt;paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000"&gt;
                  &lt;div class="card-content"&gt;
                      &lt;paper-input label="Windows username" always-float-label&gt;&lt;/paper-input&gt;
                      &lt;paper-input label="Password" type="password" always-float-label&gt;&lt;/paper-input&gt;
                  &lt;/div&gt;
                  &lt;div class="card-actions"&gt;
                      &lt;paper-button&gt;Login&lt;/paper-button&gt;
                  &lt;/div&gt;
              &lt;/paper-card&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;style is="custom-style"&gt;
      body {
          @apply(--layout-fullbleed);
          @apply(--layout-vertical);
      }
  
      .flex-horizontal {
          @apply(--layout-horizontal);
          @apply(--layout-center-justified);
      }
  
      .flex-vertical {
          @apply(--layout-vertical);
          @apply(--layout-center);
      }
  &lt;/style&gt;
  </code></pre>