How to center an ngx-bootstrap modal

You need to use the bootstrap class.

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
...
})
export class ModalComponent {
  modalRef: BsModalRef;

  // Here we add another class to our (.modal.dialog)
  // and we need to pass this config when open our modal
  config = {
    class: 'modal-dialog-centered'
  }

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    // pass the config as second param
    this.modalRef = this.modalService.show(template, this.config);
  }
}

in the .ts file you have a code like this (to open modal popup)...

private showModal(template: TemplateRef<any>): BsModalRef {
    return this.modalService.show(
      template,
      { class: 'modal-lg modal-dialog-centered',
        ignoreBackdropClick: true, 
        keyboard: false
      });
}

You can see that I've added modal-dialog-centered to the class. after doing this you can also modify the modal-dialog-centered class in your css.

Try adding this attribute to your CSS: vertical-align: middle to your .modal.dialog class

Plunker for modal

.modal.fade {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal-dialog {
    vertical-align:middle;
    height:18em;
    background-color: rgba(0,0,0,0.5); 
}

Why not to use bootstrap modal-dialog-centered class:

this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);