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