中心在屏幕中間的角度用戶界面模式

Question

我遵循從here取得的解決方案，但它不工作。我需要在屏幕中間水平和垂直居中模式權限。我試圖在這plunk，但它不工作，有什麼想法？

的Javascript

var app = angular.module('app', ['ui.bootstrap']); 
app.controller('ctl', function ($scope,$uibModal) { 

    $scope.modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     windowClass: 'app-modal', 
     }); 
}); 

HTML

<style> 
     .app-modal .modal-content { 
      width: 360px; 
      height: 200px; 
     } 
    </style> 

    <script type="text/ng-template" id="myModalContent.html"> 

    <div class="modal-header"> 
     <h4 class="modal-title">The Title</h4> 
    </div> 

    <p>Some text</p 

</script> 

Answer 1

在你的CSS，試試這個：

.modal-dialog { 
    position: absolute; 
    top: 50%; 
    /*half of the modal height*/ 
    margin-top: -100px; 
    left: 50%; 
    /*half of the modal width*/ 
    margin-left: -180px; 
} 

Answer 2

要引導中心的模式，你可以結合使用transform: translate(-50%, -50%);與postion: absolute;財產。

<style> 
.modal-dialog { 
    margin: 0; 
    top: 50%; 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 
</style> 

不要忘了零出利潤margin: 0;