1

我正在尝试将具有一定高度和一定宽度的 div 框定位到具有一定高度和一定宽度的屏幕的中心。

宽度和高度由 JavaScript 检测。我正在努力成为一名更好的程序员，而数学和编程并不总是我最好的特质。我意识到我需要做一些除法和百分比修复，但需要一个指针：

<script type="text/javascript">

var w=document.width;
var h=document.height;

var img_w=200;
var img_h=300;

var css=;

/*

Example

w=600;
h=400;

img_w=200;
img h=300;


therefore css will be

position:absolute;
top:150px;
left:100px;
right:100px;
bottom:100px;

see my image.

*/

document.writeln(css);
</script>

在此处输入图像描述

所以基本上，无论img_wandimg_h是什么，盒子都应该在中间有边距。

4

5 回答 5

3

您正在寻找的公式如下：

left = ( width - img_width ) / 2
top = ( height - img_height ) / 2

PS：在你的例子中，你倒置了hand w。

于 2012-12-06T11:43:13.043 回答
2

请让我提出一种替代方法。

CSS 不是一种程序性语言，而是一种声明性语言。让浏览器为您计算并使用margin: auto. 我知道这不是你要找的，但 CSS 就是这样。

有关示例，请参见http://jsfiddle.net/th43T/ 。

于 2012-12-06T11:47:31.540 回答
0

如果您需要在调整窗口大小期间使其居中，您还必须检查窗口调整大小事件。

我创建了这个 jsfiddle：http: //jsfiddle.net/ekRff/1/

javascript:

function updateBoxPosition($box) {
    var window_width = $(window).width();
    var window_height = $(window).height();
    var left_pos = (window_width - $box.width()) / 2;
    var top_pos = (window_height - $box.height()) / 2;

    $box.css('left', left_pos);
    $box.css('top', top_pos);
}

$(function() {
    var $box = $("#box");
    var window_width = 0;
    var window_height = 0;

    var resizeTimer;
    $(window).on('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            updateBoxPosition($box);
        }, 25);
    });

    updateBoxPosition($box);          
});​

顶部函数处理定位，定位绑定在 onload 事件期间完成。它确实需要 jQuery，但我确实推荐它用于这种情况，因为浏览器处理窗口宽度的方式有很多不同。

为调整大小事件添加的计时器是为了提高性能，调整大小事件在调整大小期间被频繁触发。

于 2012-12-06T12:31:23.057 回答
0

我首先认为数学是（正如其他人指出的那样）

数学是：（总宽度 - 图像宽度）/ 2。高度也是如此

但是，为什么在您的示例中是顶部 150 像素和底部 100 像素？

于 2012-12-06T11:44:58.800 回答
0 
Block css:{
    left: 50%;
    top: 50%;
}

JS (useing jQuery): {
    block.css({
        'margin-left': '-' + (block.outerWidth() / 2), // margin-left: -1/2 of block width
        'margin-top': '-' + (block.outerHeight() / 2), // margin-top: -1/2 of block height
    })
}
于 2012-12-06T11:46:53.230 回答