화면 중앙의 모서리 각도 UI 모달

Question

here에서 가져온 해결책을 따랐지만 작동하지 않습니다. 나는 스크린의 중앙에 모달의 중심을 수평과 수직으로 중심에 둘 필요가있다. 나는 이것에서 시도했다 plunk 그러나 그것은 일하지 않고있다, 어떤 생각?

자바 스크립트

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

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

HTML

당신의 CSS에서

<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

,이 시도 :

.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

부트 스트랩에 모달 중심을하려면이 postion: absolute; 특성과 함께 transform: translate(-50%, -50%);을 사용할 수 있습니다 .

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

이 솔루션은 나를 위해 작동하지 않았다 여백 margin: 0;