即使在窗口重新resize后，也可以将绝对定位DIV居中（用于响应式设计）
即使在窗口重新resize和所有主要设备（响应式设计）之后，我想在屏幕中间保留一个绝对定位的DIV #box 。 响应式#box使用css3媒体查询完成，而left使用jquery计算。 但我可以将我的盒子正好放在中间位置，在小窗口的窗口重新调整尺寸上，左右边距不等。
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(); });
使用CSS（ 源 ）使框中心，然后调整媒体查询中的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/
回答你的评论 ：
margin-left是根据框的宽度计算的，因此这与任何视口或窗口宽度无关。 我猜从你的评论中你的盒子只是偏离了一些像素（你应该更清楚地说明，以便我们可以提供更好的帮助）。 jQuery的width将返回“没有”滚动条的宽度，因此它会根据内容的高度（即是否有滚动条）进行更改。 您可以尝试在获取宽度之前临时“隐藏”滚动条： document.body.style.overflow = "hidden"; 。 但总的来说，我会说.width()的返回值应该是你想要的。 这是你想要的？
你可以添加这个，甚至不需要媒体查询或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%);
以%表示width和height 。
看到这个小提琴： 小提琴
我已经添加了：
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; }