Angularjs ui bootstrap: how to vertical center modal component?

Question

Recently I am learning angularjs. I have used bootstrap before. With jquery, I can easily change the position of the modal component position to make it vertical align. Now

Answer 1

The above solutions will apply to all the modals. If you want to apply to selective modals then follow the below given solution.

The CSS uses .class-a.class-b and .class-a .class-b selector and need to set option windowClass.

.center-modal.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .center-modal.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.center-modal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

var modalInstance = $uibModal.open({
    templateUrl: 'modules/users/client/views/authentication/login.client.view.html',
    windowClass: "center-modal"
});