Question

即使在窗口重新调整大小和所有主要设备（响应式设计）之后，我想在屏幕中间保留一个绝对定位的DIV #box。响应式#box使用css3媒体查询完成，而left使用jquery计算。但我可以将我的盒子正好放在中间位置，在小窗口的窗口重新调整尺寸上，左边和右边不等。右边缘。

<HTML>

<body>
    <div id ="box">
      <a> is am athe centre?'</a>
    </div>
</body>



</HTML>

css：

 #box {
      position:absolute;
      background:red; 
      width:900px; 
      height:400px;
      }

@media only screen and (min-width: 979px)


{
 #box{width:760px;background:yellow;}
}


@media only screen and (min-width: 768px) and (max-width: 979px)

{
#box{width:760px;background:pink;}
}



@media only screen and (min-width: 480px) and (max-width: 767px) 

{
#box{width:460px;background:black;}
}


@media only screen and (min-width: 321px) and (max-width: 479px) 

{
#box{width:300px;background:blue;}
}


@media only screen and (max-width: 320px) 

{
#box{width:300px;background:grey;}
}

jQuery：

function leftmargin(){
 var w_box    =  ($('#box').width());
 var w_window = $(window).width();
 var w_left = (w_window - w_box)/2 ;
 $("#box").css("left", w_left + "px");
}

$(window).resize(function() {
   leftmargin();
});

$(document).ready(function() {
   leftmargin();
});

Answer 1

你可以添加它，甚至不需要媒体查询或javascript（因为你知道盒子的大小）：

#box {
  position:absolute;
  background:red; 
  width:900px; 
  height:400px;
  top: 50%;
  left: 50%;
  margin-top: -200px; // half total width (border, padding, and width)
  margin-left: -450px; // half total height (border, padding, and width)
}

如果您不知道宽度，但仅仅定位支持转换的现代浏览器就可以了，请将margins替换为：

transform: translate(-50%, -50%);

Answer 2

取width中的height和%。

看到这个小提琴：Fiddle

我已添加：

body{
    width: 100%;
    margin: 0 auto;
}
#box {
      position:absolute;
      background:red; 
      width:80%; 
      height:40%;
      margin-left: 10%;
      margin-top: 20%;
}

Answer 3

使用CSS（source）对框进行居中，然后调整媒体查询中的width和margin-left：

#box {
    position:absolute;
    border:1px solid red;
    width:760px;
    height:30px;
    background:yellow;
    left: 50%;
    margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
    #box {
        background:pink;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px)  {
    #box {
        width:460px;
        background:black;
        margin-left:-230px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 479px)  {
    #box {
        width:300px;
        background:blue;
        margin-left:-150px;
    }
}
@media only screen and (max-width: 320px) {
    #box {
        background:grey;
    }
}

在此演示，将内框边界拖动到“模拟设备尺寸”：http://jsfiddle.net/hD657/3/

基于JavaScript的解决方案：http://jsfiddle.net/NnDvs/

回答comment：

margin-left是根据框的宽度计算的，因此这与任何视口或窗口宽度无关。我猜从你的评论中你的盒子只是偏离了一些像素（你应该更清楚地说明，以便我们可以提供更好的帮助）。 jQuery的width将返回“没有”滚动条的宽度，因此它会根据内容的高度（即是否有滚动条）进行更改。在获取宽度之前，您可以尝试暂时“隐藏”滚动条：document.body.style.overflow = "hidden";。但总的来说，我会说.width()的返回值应该是你想要的。这是你在找什么？

Answer 4

不太确定你想要什么，以绝对定位的div为中心很容易，但这是关于响应式设计和可变宽度/高度的呢？

我能想到的最好的就是使用显示表单元格：

html {
    display: table;
    width: 100%;
    height: 100%;
}
body {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#box {
    display: inline-block;
    background: #c00;
}

http://jsfiddle.net/f00dmonsta/cZC3g/

即使在窗口重新调整大小后，也可以将绝对定位DIV居中（用于响应式设计）

4 个答案: