Mover um p:dialog com javascript

Front-end
#1

Gostaria de alterar a posição de um dialog ao clicar num botão, é possível isso? Estou tentando aqui e não estou conseguindo…

#2

Tem como você colocar o dialog aqui?

#3

Bem, o código está bem grandinho mas vou resumir aqui…

O que está acontecendo é que quando clico em avançar o dialog pode aumentar ou diminuir de acordo com o tamanho pois coloquei width e height auto. O problema é que ele não centraliza o dialog após passar de uma etapa pra outra.

Acho que poderia fazer isso por javascript usando o event onNext mas não sei como.

Aqui vai o código resumido:

<h:form id="formAddCidades">
                <p:dialog id="dialogAddCidades" header="Adicionar Cidades" widgetVar="dialogAddCidades" resizable="false" closable="true"
                          showEffect="clip" hideEffect="fold" modal="true" minWidth="720" styleClass="dialogSemRolagem" position="center">
                    <p:wizard widgetVar="wizardCidades" flowListener="#{cidadeMB.handleFlowAdicionaCidade}" backLabel="voltar" nextLabel="avançar">
<!-- TABS -->
                    </p:wizard>
                    <p:hotkey bind="esc" handler="dialogAddCidades.hide()">
                    </p:hotkey>
                </p:dialog>
            </h:form>
#4