Jquery 即使在重新调整车窗尺寸后，也要对中绝对定位DIV（用于响应性设计）_Jquery_Css_Responsive Design

Jquery 即使在重新调整车窗尺寸后，也要对中绝对定位DIV（用于响应性设计）

jquery css responsive-design

Jquery 即使在重新调整车窗尺寸后，也要对中绝对定位DIV（用于响应性设计）,jquery,css,responsive-design,Jquery,Css,Responsive Design,我想在屏幕中间保留一个绝对定位的DIV#box，即使在窗口重新调整大小后，也可以用于所有主要设备（响应式设计）。响应#框使用css3媒体查询完成，而left使用jquery计算。但我可以把我的盒子精确地放在中间，在小屏幕的窗口重新调整大小时，左右边距是不相等的 <HTML> <body> <div id ="box"> <a> is am athe centre?'</a> </div> <

我想在屏幕中间保留一个绝对定位的DIV

#box

，即使在窗口重新调整大小后，也可以用于所有主要设备（响应式设计）。响应#框使用css3媒体查询完成，而

left

使用jquery计算。但我可以把我的盒子精确地放在中间，在小屏幕的窗口重新调整大小时，左右边距是不相等的

<HTML>

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



</HTML>

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

您只需添加此项，甚至不需要媒体查询或javascript（因为您知道框的大小）：

如果您不知道宽度，但可以只针对支持transform的现代浏览器，请将

边距替换为：
transform: translate(-50%, -50%);

您只需添加此项，甚至不需要媒体查询或javascript（因为您知道框的大小）：
如果您不知道宽度，但可以只针对支持transform的现代浏览器，请将边距替换为：
transform: translate(-50%, -50%);

取%
中的宽度和高度
看这把小提琴：
我补充说：
body{
    width: 100%;
    margin: 0 auto;
}
#box {
      position:absolute;
      background:red; 
      width:80%; 
      height:40%;
      margin-left: 10%;
      margin-top: 20%;
}

取%
中的宽度和高度
看这把小提琴：
我补充说：
body{
    width: 100%;
    margin: 0 auto;
}
#box {
      position:absolute;
      background:red; 
      width:80%; 
      height:40%;
      margin-left: 10%;
      margin-top: 20%;
}

不太确定您想要什么，将绝对定位的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;
}

不太确定您想要什么，将绝对定位的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;
}

使用CSS（）将方框居中，然后调整媒体查询中的宽度和左边距：
#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;
    }
}

在此演示，拖动内部框架边界以“模拟设备尺寸”：
基于JavaScript的解决方案：

答复你的问题：
左边距
是根据框的宽度计算的，因此这与任何视口或窗口的宽度无关。我从您的评论中猜测，框只差了一些像素（您应该更清楚地说明这一点，以便更好地帮助我们）。jQuery的宽度
将返回宽度“无”滚动条，因此它会根据内容的高度（即，是否有滚动条）进行更改。您可以尝试在获取宽度之前暂时“隐藏”滚动条：document.body.style.overflow=“hidden”
。但通常，我会说返回的.width（）值
应该是您要找的。这就是您要找的吗？
使用CSS（）将方框居中，然后调整媒体查询中的宽度和左边距：
#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;
    }
}

在此演示，拖动内部框架边界以“模拟设备尺寸”：
基于JavaScript的解决方案：

答复你的问题：
左边距
是根据框的宽度计算的，因此这与任何视口或窗口的宽度无关。我从您的评论中猜测，框只差了一些像素（您应该更清楚地说明这一点，以便更好地帮助我们）。jQuery的宽度
将返回宽度“无”滚动条，因此它会根据内容的高度（即，是否有滚动条）进行更改。您可以尝试在获取宽度之前暂时“隐藏”滚动条：document.body.style.overflow=“hidden”
。但通常，我会说返回的.width（）值
应该是您要找的。这就是您要找的吗？
对于固定宽度和高度的大屏幕来说，这是可以的；但是对于响应性设计来说，我的#框具有可变宽度和高度。然后使用第二个选项。即使您使用高度和宽度的百分比，它也可以工作。媒体查询和转换具有相同的浏览器设置是的，因此您可以轻松地在不支持转换的旧浏览器上使用javascript。这对于具有固定宽度和高度的大屏幕来说是可行的；但是对于响应性设计来说，具有可变宽度和高度的my#box则是可行的。然后使用第二个选项。即使您使用高度和宽度的百分比，它也可以工作。媒体查询和转换具有same browser share，因此您可以轻松地将javascript用于不支持转换的旧浏览器。感谢您的建议aayushi！但我希望使用精确宽度，而不是百分比宽度。好的，检查更新的小提琴，更改宽度：900px和高度：450px；
并进行测试。效果很好！因为宽度与w成比例窗口宽度。但在我的情况下，框的宽度是针对不同的屏幕大小的。谢谢你的建议阿尤什！但我想坚持精确的宽度，而不是百分比宽度。好的，检查更新的小提琴，然后更改宽度：900px和高度：450px；
并测试。它工作得很好！因为宽度与窗口宽度成比例。但是在我的ca中不同屏幕大小的se框宽度不同。请参阅我的css3媒体查询！对于不同的屏幕大小，我的#框具有不同的宽度（宽度根据屏幕大小而变化）。因此，我想为所有屏幕大小将我的#框居中。您可以使用媒体查询，上面的设置应将任何宽度/高度的
#框
居中…请参阅我的css3媒体查询！对于不同的屏幕大小，我的#框具有不同的宽度（宽度根据屏幕大小而变化）。因此，我想为所有屏幕大小将我的#框居中。您可以使用媒体查询，上面的设置应将任何宽度/高度的
#框
居中…感谢您的回答！这与我实际需要的接近。这在特定屏幕大小上效果很好。但我想使用jquery实现左边距，因此即使在单像素上也可以重新调整我的div框始终保持在中心。这就是左：50%
的实际操作。当视口宽度更改1px时，框的宽度是否会更改？然后查看我的JavaScript解决方案