如何将模态框居中显示在屏幕中央？

Question

如何将模态框居中到屏幕中央？ 这是我的HTML和JS代码。 在Chrome控制台中，它可以工作，但当我刷新页面时，它就不起作用了。

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

- Vlad Udod

---

你正在使用Bootstrap吗？如果是，请查看此答案。 - Robiseb

纯JavaScript：https://dev59.com/questions/wVkS5IYBdhLWcg3wn36-#62282447 - Hasan_Naser

Answer 1

简单解决的方法

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

- Vlad Udod

---

结果是模糊的文本。 - Ferit

如果一个 div 中有太多内容，而你不想让它的顶部粘在框架上，那么你应该添加 max-height: 90%;，这对我很有效。 - turanszkik

Answer 2

不需要 jQuery，你只需要使用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>

如果您更喜欢使用 jQuery 解决方案，这里是它：

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

- xxxmatko

---

浮动：左 - Chuck Le Butt

当我滚动时，模态框不会移动 - 它不会保持在视口的中心。 - Alexander Mills

Answer 3

如果您正在使用Bootstrap模态框，您只需要将.modal-dialog-centered class添加到模态对话框中即可。请参见下面的示例代码：

将以下行代码：

```

```

更改为如下行代码：

```

```

- Harleym7000

Answer 4

试试这样做

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

如果您喜欢使用jQuery，可以尝试以下方法：

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

- saravanajd

---

纯CSS解决方案对我很有效，非常整洁！ - Rick Glimmer

Answer 5

如果您在左侧CSS属性上使用CSS calc()函数，将模态框居中相当简单。假设模态框的宽度为600px，您可以使用屏幕宽度的50％减去模态框宽度的一半。下面的示例中，模态框宽度为600px，因此我将calc（）函数设置为50％ - 300px。

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

- Jay Jara

---

这个 CSS 不起作用。 - Rohan Devaki

@RohanDevaki - 你有任何冲突的样式吗？我一直使用CSS calc函数而没有问题。如果你要垂直居中，你可能需要在calc函数中将“50％”更改为（50vh）。 - Jay Jara

@JayJara 这不是一个正确的解决方案，这只适用于固定宽度的水平对齐。高度怎么办？如果模态框有动态内容呢？还有，如何处理响应式和移动用户？ - GeorgeP

Answer 6

你应该将模态框和模态框对话框的CSS类重写为以下内容：

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

- rawand deheliah

Answer 7

只需像下面这样添加"class = modal-dialog-centered"

<div class="modal center" tabindex="-1" id="tourBookModal">
  <div class="modal-dialog modal-lg modal-dialog-centered">
       <div class="modal-content"></div>
  </div>
</div>

- pubudu sachintha

---

最佳解决方案是不需要任何特定的CSS和数学计算。 - undefined

Answer 8

纯JavaScript

这段代码可以帮助你在任何场景下使用。

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

    };

- Hasan_Naser

Answer 9

在js文件中添加以下代码。 注意： 将“#mydialog”更改为您的选择器（对话框类或ID）

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

感谢您，Anand。

- anand vishwakarma

---

jQuery 中的 position 方法不接受参数。这里有一个 JS Bin，展示了你的代码运作情况：http://jsbin.com/?js,console,output 请修正或更新你的答案。 - KryptoniteDove

Answer 10

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

.modal-content {
  margin: 0 auto;
}

- Md Shahriar

---

高质量的仅包含代码的答案应该至少配有一点支持性文本，解释您的代码如何解决问题。 - Wyck