How to center a modal window on a page?

Question

I am trying center a modal window in the browser page. I just want to center it, so that it should be responsive for all the screens.

Answer 1

Set bootstrap modal center to screen using css only.

.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;
}

Browsers & Screens Compatible Solution