Why do Vue Material dialogs tend to move off screen?

I am using a dialog from Vue Material (https://vuematerial.io/components/dialog). If I follow the link and open the first custom dialog on the page, it moves to the top left of my screen, and I can only see a portion of the dialog. The same happens with the dialogs that I have in my Vue app, and no CSS seems to bring it to the center of my screen. I am trying to show an interactive map in a dialog. Is there any way to keep my Vue dialog in the center of the browser window so I could actually see all of it and use it?

My dialog has the following markup:

    <md-dialog :md-active.sync="showDialog">
      <md-dialog-title>Map</md-dialog-title>

      <interactivemap :lat="lat" :lon="lon" />

      <md-dialog-actions>
        <md-button class="md-primary" @click="showDialog = false">Close</md-button>
      </md-dialog-actions>
    </md-dialog>

.md-dialog-container {
  transform: translate(0%,0%) scale(1) !important;
}

Modified the answer given by https://stackoverflow.com/users/13602136/zed, and my dialogue now sits nicely in the centre of my screen