-5

只想使用jquery将蓝色框直接居中在屏幕中央。

jsFiddle：http: //jsfiddle.net/Pxjkk/

<html>
4

2 回答 2

1

要将蓝色框居中，必须将其位置设置为position:absolute;

如果您的蓝色框动态改变大小，则必须使用 javascript 将其居中。

这是一个简单的例子：

$('#color')
    .css('top','50%')
    .css('left','50%')
    .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
    .css('margin-top','-'+($('#color').outerHeight()/2)+'px');

确保它保持在浏览器调整大小的中心：

$(document).bind('resize', function(){
        $('#color')
        .css('top','50%')
        .css('left','50%')
        .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
        .css('margin-top','-'+($('#color').outerHeight()/2)+'px');
    });

将居中代码包装到一个函数中并在蓝色框的大小发生变化时调用它可能是一个好主意。

这是编辑后的 ​​jsFiddle：

http://jsfiddle.net/mdkpS/

于 2013-03-01T00:42:53.187 回答
0

css中元素居中的基础知识：

  • 为您的元素制作一个容器并将其放在body水平位置（在屏幕中间居中）
  • 设置position: relative在容器上
  • position: absolute在元素上设置
  • 将固定width和添加height到元素
  • 设置top: 50%并left: 50%打开元素
  • 将margin-left和分别设置margin-top为负的width一半height

相同的逻辑适用于 jQuery，只是您可以动态计算尺寸和边距。

于 2013-03-01T00:35:45.853 回答