Can't vertically center content inside iron-pages

Question

I can't seem to be able to vertically center my content that resides within iron-pages (which in turns resides in a paper-drawer-panel ). See example code below:

<paper-drawer-panel id="drawerPanel" responsive-width="1280px">

  <div class="nav" drawer>
    <!-- Nav Content -->
    <paper-menu attr-for-selected="data-route" selected="{{route}}">
        <paper-item data-route="findParties">
          <iron-icon icon="home"></iron-icon>
          <span>Find Parties</span>
        </paper-item>
        <paper-item data-route="myParties">
          <iron-icon icon="icons:alarm-add"></iron-icon>
          <span>My Parties</span>
        </paper-item>
        <paper-item data-route="friends">
          <iron-icon icon="home"></iron-icon>
          <span>Friends</span>
        </paper-item>
    </paper-menu>
  </div>

  <paper-header-panel class="main" main mode="waterfall">

    <!-- Main Toolbar -->
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
    </paper-toolbar>

    <!-- Main Content -->
    <div>
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <div id="tempId" data-route="findParties">
           <party-list-item></party-list-item>
           <party-list-item></party-list-item>
        </div>

        <section data-route="myParties">
          My Parties
        </section>

        <section data-route="friends">
          My Friends
        </section>
      </iron-pages>
    </div>

  </paper-header-panel>

</paper-drawer-panel>

I've tried adding class="layout vertical center-justified" but it won't work. I also tried on some other places and create new divs and add the layout classes but it won't work either. Not sure what I'm doing wrong. There's no additional CSS that is being used other then what is generated by the paper-elements.

Thanks!

Answer 1

I'm assuming that you want to vertically center the content in your iron-pages. In your current solution, the iron page does not fill up the available space. You can achieve that by adding a fit layout class. Then, using the classes that you have mentioned should work.

<iron-pages class="layout vertical center-justified fit">

Update

To center horizontally, specify horizontal in the class.

<iron-pages class="layout horizontal center-justified">