Question

我有以下代码：

更新：

.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在doc ready上初始化该函数。

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

这个怎么样

<强> Check Fiddle

从框中删除了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%;
}

中心响应DIV

2 个答案: