Question

如何将模态居中到屏幕中心？这是我的html和js代码它适用于Chrome控制台，但是当我刷新此页面时 - 它无法正常工作

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

Answer 1

简便的解决方法

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

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>

Answer 3

试试这个

 ffmpeg -i test.m4v -acodec copy -vcodec copy -map 0:1 -map 0:2 no2.mp4

如果您更喜欢jquery，请尝试这个

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

Answer 4

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

    };

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

Answer 6

如果使用的是Bootstrap模态，则只需将.modal-dialog-centered类添加到模态对话框。见下文

更改此行<div class="modal-dialog" role="document">

此行<div class="modal-dialog modal-dialog-centered" role="document">

Answer 7

尝试类似：

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

Answer 8

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

＆＃13;

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

＆＃13;

谢谢，阿南德。

Answer 9

我遇到了同样的问题，但是如果您想看一下，我就用一种奇怪的方式解决了。

.modal {
 position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #07070767;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

Answer 10

你应该像这样重写模态和模态对话框的css类：

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

Answer 11

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

.modal-content {
  margin: 0 auto;
}

如何将模态居中到屏幕中心？

11 个答案: