How to center a modal window on a page?

html modal-dialog center
Raghu picture Raghu · Jan 6, 2014 · Viewed 87.6k times · Source

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

Waqar Alamgir picture Waqar Alamgir · Jan 6, 2014

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>

Related questions

Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user …

Read More
Auto-click button element on page load using jQuery

If I wanted to auto-click a button element on page load, how would I go about this using jQuery? The button html is <button class="md-trigger" id="modal" data-modal="modal"></button> Any help on this topic …

Read More
Set bootstrap modal body height by percentage

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no …

Read More