How to center an ngx-bootstrap modal

Question

Trying to center this ngx-boostrap modal using CSS like this but it's not working:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

But in the dev tool, I'm able to add CSS like this:

.modal.dialog{
  top: 50%
}

So at least it is centered vertically, but this is in the dev tool, and there is no .modal.dialogclass in the html template

Is there a way to center properly the ngx-bootstrap modal ?

I want to create a generic modal component to use it anywhere, by providing an input message and adding a yes/no dialog and output the user choice (using EventEmitter)

I've found an example in the following Plunker, but not able to reproduce it in a separate custom component.

The plunker example comes from this website: https://github.com/valor-software/ngx-bootstrap/issues/2334

Update:

After @Wira Xie answer, when I use the Static modal and this CSS:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

The modal shows centered, but only the Esc key can hide it, so when I click outside the modal, it's still visible.

Answer 1

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

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

Answer 2

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.

Answer 3

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