Question

var x=200, y=140

我如何将div的中心（宽度和高度= 50px）定位到上述坐标？

Answer 1

您可以使用纯CSS实现此目的。假设你的方形div是50px的静态，父div可以有任何坐标：

.parent{
    position:relative;
    width:200px;
    height:140px;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25px; /* negative half of div height*/
    margin-left:-25px; /* negative half of div width */
    width:50px;
    height:50px;
}

检查http://jsfiddle.net/F4RVf/1/

处的工作示例

Answer 2

这应该有效：

//onload 
$(document).ready(function() {
    var x=200;
    var y=140;
    var div = $("#myDiv");
    var divWidth = div.width() / 2;
    var divHeight = div.height() / 2;
    div.css('left', x - divWidth );
    div.css('top', y - divHeight);
});

这是CSS

#myDiv{position:absolute; left:0; width:50px; height:50px; background-color:red;}

在此处查看此行动：http://jsfiddle.net/cgvAB/3//

Answer 3

根据页面的其余部分，您可以使用绝对定位（可能在position:relative父级内部，如果这些是偏移的话）：

<style type="text/css">
    #myDiv {
        position: absolute;
        width: 300px;
        height: 300px;
        left: 200px;
        top: 140px;
        margin: -150px 0 0 -150px;
    }
</style>

如果div的高度/宽度可变，则需要使用javascript（例如使用jQuery）执行边距位：

<script type="text/javascript">
    var $myDiv = $('#myDiv');
    $myDiv.css({
        'margin-left': -($myDiv.outerWidth({ 'margin': true }) / 2),
        'margin-top': -($myDiv.outerHeight({ 'margin': true }) / 2)
    });
</script>

Answer 4

<div id="mydiv" style="position: absolute; top:115px; left:175px; width:50px; height:50px;"></div>

*在动态坐标的情况下，将以下内容添加到事件处理javascript函数：

myDiv = document.getElementById('mydiv');
myDiv.style.top = x - 25 + 'px';
myDiv.style.left = y - 25 + 'px';

将div的中心定位到页面上的给定坐标

4 个答案:

检查http://jsfiddle.net/F4RVf/1/