title: How to center an ngx-bootstrap modal
body: <p>Trying to center this <a href="https://valor-software.com/ngx-bootstrap/#/modals#service-template" rel="noreferrer">ngx-boostrap modal</a> using CSS like this but it's not working:</p>
  
  <pre><code>.modal.fade.in{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </code></pre>
  
  <p>But in the dev tool, I'm able to add CSS like this:</p>
  
  <pre><code>.modal.dialog{
    top: 50%
  }
  </code></pre>
  
  <p>So at least it is centered vertically, but this is in the dev tool, and there is no <code>.modal.dialog</code>class in the <a href="https://valor-software.com/ngx-bootstrap/#/modals#service-template" rel="noreferrer">html template</a></p>
  
  <p>Is there a way to center properly the ngx-bootstrap modal ?</p>
  
  <p>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)</p>
  
  <p>I've found an example in the following <a href="https://plnkr.co/edit/NJRvUMZN2kHZruFgeOjQ?p=preview" rel="noreferrer">Plunker</a>, but not able to reproduce it in a separate custom component.</p>
  
  <p>The plunker example comes from this website: <a href="https://github.com/valor-software/ngx-bootstrap/issues/2334" rel="noreferrer">https://github.com/valor-software/ngx-bootstrap/issues/2334</a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>After @Wira Xie answer, when I use the <a href="https://valor-software.com/ngx-bootstrap/#/modals#static" rel="noreferrer">Static modal</a> and this CSS:</p>
  
  <pre><code>.modal-sm
  {
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    background-color: rgba(0,0,0,0.5); 
  }
  </code></pre>
  
  <p>The modal shows centered, but only the <code>Esc key</code> can hide it, so when I click outside the modal, it's still visible.</p>