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.

try this... http://jsfiddle.net/9t3sn/4/ – Karuppiah RK Jan 06 '14 at 06:45 — Karuppiah RK, Jan 06 '14 at 06:45

Waqar Alamgir · Answer 1 · 2014-01-06T06:40:14.783

32

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>

edited Jan 06 '14 at 06:40

answered Jan 06 '14 at 06:35

Waqar Alamgir

9,828
4
30
36

2

The problem with `left: 50%;` is that it doesn't take into account the width of the modal itself. – Alexander Suraphel Sep 28 '16 at 12:31
Then you can play around with top, left, right, bottom like this: .modal { top:200px; left:100px; right:100px; bottom:200px; } – Waqar Alamgir Oct 27 '16 at 15:04
I don't know why this answer hasn't been accepted yet. `left: 50%; margin-left: -(50% of width);` certainly centers a modal window. – Wylliam Judd Dec 11 '17 at 18:38

Billu · Answer 2 · 2021-04-07T06:39:36.303

12

Set bootstrap modal center to any size of 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

edited Apr 07 '21 at 06:39

answered Nov 19 '18 at 11:30

Billu

2,733
26
47

1

This is a great solution, because it works for a modal of any width or height. – WJH Jun 04 '20 at 12:42

score 9 · Answer 3 · edited Jun 25 '19 at 06:29

9

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>

edited Jun 25 '19 at 06:29

Shota

6,910
9
37
67

answered Dec 25 '15 at 09:15

Shurvir Mori

2,288
1
17
29

I will mention that this solution may cause blurriness on chrome browsers, even latest chromium versions: https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry – Zac Jun 13 '22 at 20:17

score 6 · Answer 4 · answered Jan 06 '14 at 06:36

6

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

answered Jan 06 '14 at 06:36

Rohan

3,296
2
32
35

score 5 · Answer 5 · answered Jan 06 '14 at 06:33

5

If modal container is as following :

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

Add css code

#containerDiv{
margin : 0 auto;
}

answered Jan 06 '14 at 06:33

Abdennour TOUMI

87,526
38
249
254

Note: I needed to make sure to not inherit any other margin attributes such as "margin-left" "margin-right" and un-set them. – Paul Cuddihy Jun 12 '17 at 15:57

score 2 · Answer 6 · answered Nov 15 '19 at 14:02

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.

score 1 · Answer 7 · answered Aug 18 '21 at 09:38

If you want to show modal on the center of the window, follow below steps;

.modal {
  text-align: center;
}
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 0rem);
 }

Also, by changing align-items & min-height you can position modal on place with responsively.

score 1 · Answer 8 · answered Dec 15 '21 at 06:43

If you have the modal content to be in the center of the modal you could use something like this. In here the top: 50% means the content's start will be 50% from top (note : here 50% is the value respect to the container's height and not it's own) which wont make our content center but when we do translate(-50%,-50%) then the element will traverse 50% upward from its start (note : here -50% is the value respect to it's own height and not the container's)

.modal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s;
}
.modal-content {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2% 7%;
  border-radius: 0.5rem;
}

score 0 · Answer 9 · answered Mar 01 '20 at 22:32

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.

score 0 · Answer 10 · answered Jul 14 '22 at 05:32

0

given class name the whole div, which used modal.

for example:

<div class="modal">
in your Content
</div>

In your Style:

.modal {
display: table;
margin: 0 auto;
}

answered Jul 14 '22 at 05:32

Subash

1
2

score 0 · Answer 11 · answered Mar 23 '23 at 11:31

0

You could simply calculate top and left to center your modal:

position: absolute;
top: calc(50% - halfOfModalHeight);
left: calc(50% - halfOfModalWidth);

answered Mar 23 '23 at 11:31

Jakub

218
3
6

How to center a modal window on a page?

11 Answers11

Linked