将元素直接置于屏幕中心。 jQuery [关闭]答案

【问题标题】：Center an element directly in the center of screen. jQuery [closed]将元素直接置于屏幕中心。 jQuery [关闭]
【发布时间】：2013-03-01 08:42:53
【问题描述】：

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

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

<html>

【问题讨论】：

你试过什么？这个 JSFiddle 与您之前的问题有关...看来您正在让我们一点一点地构建您的项目。
似乎您收到了“在问题中发布一些代码，而不是仅仅链接到 JSfiddle”消息，在这种情况下，您应该发布与问题相关的代码而不是随机标签。
提问前请先搜索！！！ bit.ly/XdUUjs
重复stackoverflow.com/q/210717/1331430

标签： javascript jquery html

【解决方案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/

【讨论】：

【解决方案2】：

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

为您的元素创建一个容器并将其放在body 级别（位于屏幕中间）
在容器上设置position: relative
在元素上设置position: absolute
将固定的width 和height 添加到元素中
在元素上设置top: 50% 和left: 50%
将margin-left 和margin-top 分别设置为width 和height 的负数

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

【讨论】：

我知道 css。我相信这个问题指定使用 jQuery。
同样的逻辑也适用于 jQuery。