Put Polymer Dialog to Center

Problem

Put the wrapper paper-dialog to the center of the screen

Solution

<paper-action-dialog id="removePrivateChannelDialog" heading="Leaving {{ removedPrivateChannel.name }}" backdrop
                     autoCloseDisabled closeSelector="#cancelBtn" style="width: 30%; height: 30%;"
                     on-core-overlay-open-completed="{{ positionCenter }}">
    <p>Are you sure</p>
    <paper-button id="cancelBtn" dismissive>Close</paper-button>
    <paper-button affirmative channelId="{{removedPrivateChannel.id}}" on-click="{{removePrivateChannel}}">Yes
    </paper-button>
</paper-action-dialog>

The javascript code

/**
                 * this function is critical for position center
                 * even the order is very important
                 *
                 * resizeHandler need to be called, like trigger a windows resize event
                 *
                 * max-width of sizing target will not be override, so please call it after resizeHandler
                 **/
function positionCenter(event) {
    event.target.resizeHandler();
    event.target.sizingTarget.style['max-width'] = '100%';
}

The reason is if you set max-width first, resizehandler will set it back