jquery - 中心响应 DIV

Question

我有以下代码：

更新：

http://jsfiddle.net/Zdevq/2/

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

}

.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;

  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

来自：http ://designshack.net/articles/css/how-to-center-anything-with-css/

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

有什么方法可以在响应 div 中创建一个真正响应的模态框？

Answer 1

您没有以正确的方式使用它，必须使用最新的 jquery 在准备好的文档上初始化该函数。

http://jsfiddle.net/n29up/1/

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

你的小updated css：

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

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

Answer 2

这个怎么样

检查小提琴

margin从盒子中取出并为容器添加了min-height和max-height..

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