title: How to show the Bootstrap modal dialog at center of the screen on all browsers and all devices?
body: <p>I'm using Bootstrap modal dialog to show some information into a pop-up but I'm not able to show this pop-up at the center of the screen. I want to show this pop-up at the center of screen on all browsers and all devices. For this I tried the following CSS code but it didn't work out for me:</p>
  
  <pre><code>.modal { 
    width: 100%;
    left: 0;
    background-color: transparent; }
  
  .modal-body { 
    display: inline-block; 
    background-color: #FFF; }
  
  
  
  .modal img { min-width: none!important; }
  </code></pre>
  
  <p>The <strong><a href="http://smartrebate.eywaharvest.com/" rel="nofollow noreferrer">link</a></strong> if you want to test.</p>
  
  <p>There upon clicking on the green colored Details button you will be able to see the modal pop-up. I want this pop-up at the center of the screen. </p>
  
  <p>Can someone please help me in this regard?</p>