How to center a modal window on a page?

问题

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.

回答1:

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>

回答2:

.modal
{
position: fixed;
left: 50%;
}

回答3:

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>

回答4:

If modal container is as following :

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

Add css code

#containerDiv{
margin : 0 auto;
}

回答5:

Simple solution using css only: set modal centre to screen

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

回答6:

when showing you modal you should put display:flex instead of block like most people usualy do. then :

<div class="modal" id="modal">
 <div class="modal-content">
  What you want !
 </div>
</div>

and CSS :

.modal {
 width: 100%;
 height: 100%;

 justify-content: center;
 align-items: center;
}

remember to put a close button in your modal-content because the other element on the screen won't be usable as the modal div covers all the screen size.

来源：https://stackoverflow.com/questions/20944334/how-to-center-a-modal-window-on-a-page

标签

html

modal-dialog

center