How to center a modal window on a page? [duplicate]

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.

Waldgrave

try this... jsfiddle.net/9t3sn/4 – Dittman

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

<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>

Eye

The problem with left: 50%; is that it doesn't take into account the width of the modal itself. – Grayson

Then you can play around with top, left, right, bottom like this: .modal { top:200px; left:100px; right:100px; bottom:200px; } – Eye

I don't know why this answer hasn't been accepted yet. left: 50%; margin-left: -(50% of width); certainly centers a modal window. – Harmony

Answer 2

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

Oppugnant

This is a great solution, because it works for a modal of any width or height. – Montez

Answer 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>

Caston

I will mention that this solution may cause blurriness on chrome browsers, even latest chromium versions: https://mcmap.net/q/144668/-chrome-font-appears-blurry – Courier

Answer 4

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

Brackish

Answer 5

If modal container is as following :

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

Add css code

#containerDiv{
margin : 0 auto;
}

Cleasta

Note: I needed to make sure to not inherit any other margin attributes such as "margin-left" "margin-right" and un-set them. – Subclass

Answer 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.

Linkman

Answer 7

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.

Mayotte

Answer 8

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

Brazilein

Answer 9

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

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

Carlina

Answer 10

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.

Dormie

Answer 11

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

Shamefaced