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

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

    

        

            Content goes here