Der Positionsfehler mit mdDialog in AngularJS

Question

I mdDialog in Angular Material in meinem Projekt verwende, aber mit zwei unterschiedlichen Art und Weise:

Way 1:

$mdDialog.show($mdDialog.confirm() 
    .ok('Submit') 
    .cancel('Cancel')); 

den Standard Diese verwenden confirm Dialog, der zeigt den Dialog in der Mitte des Browsers,

Er generiert md-dialog-container als:

Way 2:

var template = '<md-dialog>' 
    + ' <md-dialog-content>' 
    + ' </md-dialog-content>' 
    + ' <md-dialog-actions>' 
    + '  </md-dialog-actions>' 
    + '</md-dialog>'; 

    $mdDialog.show({ 
     template: template, 
     parent: angular.element(document.body), 
     disableParentScroll: false 
    }); 

Es wird md-Dialog-Container generieren:

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 471px;"> 

Dies ist jedoch ein mit top: 0px in md-dialog-container welche Anzeige auf der Oberseite der Seite, nicht in der Mitte des Browsers.

Was ist der Unterschied zwischen diesen beiden, gibt es eine Möglichkeit, die ich Way 2 als die gleichen css Stil wie Way 1 machen kann? Vielen Dank!

Demo:

http://codepen.io/anon/pen/amEdYv?editors=1010#0

http://codepen.io/anon/pen/PGEkKE (Wenn auf ältere Version des Angular-Material zu ändern, wie 0.7.1, wird es richtig angezeigt)

Answer 1

Ich habe es geschafft, das gleiche zu erreichen Ergebnis durch Hinzufügen eines CSS-Eintrags für md-dialog:

md-dialog { 
    height: auto; 
    vertical-align: central; 
    align-items: center; 
} 

Beispiel in codepen: http://codepen.io/ther/pen/YGYwBA