Center Angular modal ui - angularjs

Question

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question:
Twitter Bootstrap - Center Modal Dialog
but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:
http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
js:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("ok");
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
};
My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.

Answer 1

You can specify the style class for the modal window by using windowClass attribute while creating modalInstance
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'center-modal'
});
then in your css you can specify the definition for .center-modal like,
.center-modal {
position: fixed;
top: 10%;
left: 18.5%;
z-index: 1050;
width: 80%;
height: 80%;
margin-left: -10%;
}
or specify anything based on your needs

Answer 2

This approach works with any modal size.
.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
The original answer has an example with Plunker.