How to center modal to the center of screen?

Question

How to center modal to the center of screen? This is my html and js code It works in Chrome console, but when I refresh this page - it doesn't work

$('.modal').css('top', $(window).outerHeight() / 2 - ($(".modal-dialog").outerHeight()) / 2 + 'px');

Answer 1

Easy way to solve

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

There is no need for jQuery , you can accomplish that just using css:

 body { background: gray; } .modal { background: green; position: absolute; float: left; left: 50%; top: 50%; transform: translate(-50%, -50%); }

 <div class="modal"> Lorem ipsum </div>

If you prefer jQuery solution here is it:

 $(function() { var modal = $(".modal"); var body = $(window); // Get modal size var w = modal.width(); var h = modal.height(); // Get window size var bw = body.width(); var bh = body.height(); // Update the css and center the modal on screen modal.css({ "position": "absolute", "top": ((bh - h) / 2) + "px", "left": ((bw - w) / 2) + "px" }) });

 body { background: gray; } .modal { background: green; float: left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal"> Lorem ipsum </div>

Answer 3

Try like this

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

if you prefer jquery means try this

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

Answer 4

Pure Javascript

This code helps you in all scenarios

 var setDivCenter = function (classORid) {

        var div = document.querySelector(classORid);

        var Mwidth = div.offsetWidth;
        var Mheight = div.offsetHeight;
        var Wwidth = window.innerWidth;
        var Wheight = window.innerHeight;

        div.style.position = "absolute";
        div.style.top = ((Wheight - Mheight ) / 2 +window.pageYOffset ) + "px";
        div.style.left = ((Wwidth - Mwidth) / 2 +window.pageXOffset ) + "px";

    };

Answer 5

If you are using Bootstrap modals, all you need to do is add the .modal-dialog-centered class to the modal dialog. See below

Change this line <div class="modal-dialog" role="document">

To this line <div class="modal-dialog modal-dialog-centered" role="document">

Answer 6

Centering the modal is fairly simple if you use the CSS calc() function on the left CSS property. Let's say that the modal has a width of 600px. You can use 50% of the screen width minus half of the width for the modal. This example below has the modal at 600px so I have the calc() function at 50% - 300px.

#modal {
   position:  fixed;
   width: 600px;
   top: 40px;
   left: calc(50% - 300px);
   bottom: 40px;
   z-index: 100;
}

Answer 7

Add below code in js file. Note: "#mydialog" change to your selector(Dialog class or ID)

 $(function() { $(window).resize(function(event) { $('#mydialog').position({ my: 'center', at: 'center', of: window, collision: 'fit' }); }); });

Thanks, Anand.

Answer 8

you should rewrite the css class for modals and modals dialog as this :

.modal-dialog {
  display: flex !important;
  width: 50% !important;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.modal{
  display:flex !important;
}

Answer 9

尝试类似：

$('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight) / 2) + 'px');

Answer 10

How to center modal to the center of screen? This is my html and js code It works in Chrome console, but when I refresh this page - it doesn't work

$('.modal').css('top', $(window).outerHeight() / 2 - ($(".modal-dialog").outerHeight()) / 2 + 'px');

Answer 11

.modal-dialog {
  height: 100%;
  width: 600px;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

Answer 12

Please try this it works.

.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}