iron-flex-layout center in page

Question

I am trying to vertically and horizontally center a paper-card and can't figure out where I am going wrong:

<body unresolved>
    <div class="flex-vertical">
        <div class="flex-horizontal">
            <paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
                <div class="card-content">
                    <paper-input label="Windows username" always-float-label></paper-input>
                    <paper-input label="Password" type="password" always-float-label></paper-input>
                </div>
                <div class="card-actions">
                    <paper-button>Login</paper-button>
                </div>
            </paper-card>
        </div>
    </div>
</body>

<style is="custom-style">
    body {
        @apply(--layout-fullbleed);
        @apply(--layout-vertical);
    }

    .flex-horizontal {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
    }

    .flex-vertical {
        @apply(--layout-vertical);
        @apply(--layout-center);
    }
</style>

possible guidance: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, May 11 '16 at 12:08

score 2 · Accepted Answer · answered May 11 '16 at 14:32

First we need to import the iron-flex-layout-classes element. Then we define the classes we need and include the needed modules from the iron-flex-layout-classes element.

<style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
  .card-container {
    height: 100%;
  }
</style>

To achieve the centering we use two divs:

<div class="horizontal layout center-justified card-container">
<div class="vertical layout center-justified">

The card-container class is needed only to set the height of the div to 100%. We need the divs to have 100% height to be able to set them in the center of the page.

Working demo below.

<!doctype html>

<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-card/paper-card.html">

  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">

  <style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
    .card-container {
      height: 100%;
    }
  </style>
</head>

<body unresolved class="fullbleed">
  <div class="horizontal layout center-justified card-container">
    <div class="vertical layout center-justified">
      <paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
        <div class="card-content">
          <paper-input label="Windows username" always-float-label></paper-input>
          <paper-input label="Password" type="password" always-float-label></paper-input>
        </div>
        <div class="card-actions">
          <paper-button>Login</paper-button>
        </div>
      </paper-card>
    </div>
  </div>
</body>

Thanks I achieved this with mixins – Cheetah May 12 '16 at 13:53 — Cheetah, May 12 '16 at 13:53

iron-flex-layout center in page

1 Answers1