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

If I understand your problem correctly, you can acheive the vertical center alignment just by using CSS. Add following CSS:

.modal {
  text-align: center;
  padding: 0!important;
}

.modal::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

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

I have setup a Plunker forked from yours to make a demonstration.

You can find following links Helpful

1. Bootstrap 3 modal vertical position center
2. Codepen Emaple

Hope this helps. Cheers !!