How to center a modal window on a page?

Question

I am trying center a modal window in the browser page. I just want to center it, so that it should be responsive for all the screens.

Answer 1

Tried almost all CSS options, but finally something worked : jQuery

setInterval(function()
     {
         if($('#myModal').is(':visible')===true)
         {
             $("body").addClass("modal-open");
             $('#myModal').css({"display":"flex"});
         }
         else
         {
             $("body").removeClass("modal-open");
             $('#myModal').css({"display":"none"});
         }

     },200);

This is basic bug from Bootstrap regarding the adding/removal of class modal-open to the body tag which is being discussed over the years but no working solution till date.

Answer 2

With position:absolute Assuming your modal is 300x300

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

With display:table An alternative way for that is to make display table

<div class="modal">
    <div class="body">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>
<style>
    .modal {display:table;}
    .body {display:table-cell; vertical-align:middle; text-align:center;}
</style>

Answer 3

Set bootstrap modal center to screen using css only.

.modal {
  text-align: center;
  padding: 0!important;
}
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Browsers & Screens Compatible Solution

Answer 4

If modal container is as following :

<div id="containerDiv"> 
   <!--HTML modal -->
 </div>

Add css code

#containerDiv{
margin : 0 auto;
}

Answer 5

Try This in Full Page Preview

   .modal {
       width: 100px;
       height: 100px;
       margin:0 auto;
       display:table;
       position: absolute;
       left: 0;
       right:0;
       top: 50%; 
       border:1px solid;
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%);
       -ms-transform:translateY(-50%);
       -o-transform:translateY(-50%);
       transform:translateY(-50%);
    }

<div class="modal"></div>

Answer 6

you can use bootstrap 4 center modal

Vertically centered modal