Struggling to vertically center the content within iron-pages (nested in a paper-drawer-panel). Check out the code snippet 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>
Attempted to use
class="layout vertical center-justified"paper-elements.
Thank you!