javascript - 使用jquery将div放在窗口空白部分的中间

Question

在我的模板中，我将 div 固定在主包装器 div 的左侧，在其余部分中，我想将另一个 div 框完美地放置在中间，即使在窗口重新调整大小时也是如此。

我用 jquery 得到了当前的窗口大小：

<script type=text/javascript>
$(window).resize(function() {
       var my_window = $(window).width();
});
</script>

html:

<div id="wrapper">
<div id="rightbox"></div>
<div id="leftbox"> </div>
</div>

CSS：

#wrapper{
position:absolute;
width:100%;
height:100%;
background:green;}

#leftbox{
position:fixed;
width:100px;
height:100%;
top:0;left:0;
background:red;}


#rightbox{
position:fixed;
width:400px;
height:100px;
bottom:100px;
left:50px;
background:blue;}

演示：http: //jsfiddle.net/NpeRZ/

现在我想放置rightbox div在任何屏幕分辨率的绿屏中间，所以我想要灵活的宽度rightbox div。如何使用 jquery 来设置 rightbox 始终在中间。同样根据jquerymy_window值，我想为rightbox div设置不同的margin-left和margin-right。

for my-window 1024px :margin-left = 100px,
for my-window 768px  :margin-left = 80px.
for my-window 640px  :margin-left = 60px.
for my-window 480px  :margin-left = 40px.
for my-window 240px  :margin-left = 20px. 

Answer 1

尝试这个：

#rightbox{
position:fixed;
width:400px;
height:100px;
left: 100px;
right: 0px;
top: 0px;
margin: auto;
bottom:0px;
background:blue;
}

左边将是左框架或 div 的大小。

Answer 2

你不必使用Jquery，只需将右侧框的css更改为：

#rightbox{
position:fixed;
width:400px;
height:100px;
left:50%;
margin-left:-150px;    
top:50%;
margin-top:-50px;
background:blue;}

刚刚试了一下，完美运行。