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

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 的工作示例。净/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';