Jquery 中央反应部

我有以下代码：

更新：

发件人：

==但是我想要的是模态框具有相对于响应容器div的宽度

有没有办法在响应div中创建一个真正响应的模态框？

这个怎么样

从框中删除

边距

，并为容器添加

最小高度

和

最大高度

.container {
  height: 100%;
  width: 100%;
  background: #eee;
  position: absolute;
}

.box {
  height: auto;
  width: 70%;
  background: gray;
  position: absolute;
  /*Centering Method 2*/
  left: 15%;
  top: 45%;
}​

---

您没有以正确的方式使用它，必须使用最新的jquery在doc ready上初始化该函数

这是

jQuery

代码- 按以下方式使用jquery：

但是一定要添加最新的jquery插件

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
  $(function(){

    $.fn.center = function () {
         this.css("position","absolute");
         this.css("top", ( $(window).height() - this.height() ) / 2  + "px");
         this.css("left", ( $(window).width() - this.width() ) / 2 + "px");
         return this;
    }

    $(".box").center();   // on page load div will be entered                                               

    $(window).resize(function(){ // whatever the screen size this
         $(".box").center();       // this will make it center when
    });                          // window resize happens

  });
</script>

---

sry，我忘了在示例中设置容器来接管整个页面，它应该更像这样：不幸的是，当框中有更多内容时，它不会与大小无关，它不再垂直居中：有没有办法只在CSS中这样做？这里的问题是相同的：如果框中有更多或更少的内容会怎样：我以前也尝试过这个方法，但它与大小无关，例如，它不会自动对齐到垂直中心。然后我建议您使用jquery将div居中，这将非常好。不确定如何做到这一点。当调整窗口大小时，这不是有点“急促”吗？你没有以正确的方式使用它，应该是这样的：很好！但要使用

this.outerWidth

和

this.outerwight

。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
  $(function(){

    $.fn.center = function () {
         this.css("position","absolute");
         this.css("top", ( $(window).height() - this.height() ) / 2  + "px");
         this.css("left", ( $(window).width() - this.width() ) / 2 + "px");
         return this;
    }

    $(".box").center();   // on page load div will be entered                                               

    $(window).resize(function(){ // whatever the screen size this
         $(".box").center();       // this will make it center when
    });                          // window resize happens

  });
</script>

.container {
    height: 100%;
    width: 100%;
    background: #eee;
    position: absolute;
}

.box {
   height: auto;
   width: 70%;
   background: gray;
   position: absolute;
   margin: 0;
   left:0;
   top:0;
}