Javascript 第一次单击事件而不是第二次单击事件时，偏移视线和偏移网络宽度计算不正确

我编写了以下脚本来显示隐藏元素，然后将其位置固定到页面中心

function popUp(id,type) {
var popUpBox = document.getElementById(id);

popUpBox.style.position = "fixed";
popUpBox.style.display = "block";

popUpBox.style.zIndex = "6";

popUpBox.style.top = "50%";
popUpBox.style.left = "50%";

var height = popUpBox.offsetHeight;
var width = popUpBox.offsetWidth;
var marginTop = (height / 2) * -1;
var marginLeft = (width / 2) * -1;

popUpBox.style.marginTop = marginTop + "px";
popUpBox.style.marginLeft = marginLeft + "px";
}

当onclick事件调用此函数时，offsetHeight和offsetWidth的计算不正确，因此无法正确居中元素。如果再次单击onclick元素，则offsetHeight和offsetWidth计算正确

---

我试着用我能想象到的每一种方式来改变顺序，这让我发疯了！非常感谢您的帮助

我猜你的身高和宽度没有在父母身上定义。看看这把小提琴在哪里演奏得好。男孩，我很聪明

旧答案 我认为这可以做得简单得多。您正在将顶部和左侧属性设置为50%。这将使固定元件稍微偏离中心。我想你是想用负的边距把它拉回到正确的位置。相反-只需从一开始计算正确的顶部/左侧值，不必担心边距。这里是一个jQuery解决方案，但它可以很容易地适应普通js。我还认为，如果窗口被滚动，那么当前的代码将无法工作

//this code will center the following element on the screen
$('#elementid').click(function() {
    $(this).css('position','fixed');
    $(this).css('top', (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop() + 'px');
    $(this).css('left', (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft() + 'px');
});

---

你是正确的，你的方式将工作（我测试它，以确保OffsetSight和offsetWidth是正确的），除了你不能调整窗口的大小，并让div保持完全居中，这是我正在寻找的。我真的最感兴趣的是为什么我的离网和离网宽度没有给我正确的数字，因为我一直在使用css技术，它总是给我想要的效果。啊，我现在明白了。我把你的问题投了赞成票，希望有人能给你一个更好的答案。您可以将上述内容绑定到

$（window）.resize（）

事件，但您的方法肯定更优雅。嗯，您的代码对我来说似乎工作得很好@谢曼先生，谢谢。你让我看到了我的错误。请注意：如果不为要确定其高度和宽度的图元定义高度和宽度，则无法使用offsetHeight和offsetWidth.Yay获得正确的高度和宽度。很高兴你把它解决了。像这样的问题，一切看起来都很好，但不是-让我的头想爆炸！如果你愿意把它作为一个答案，我一定会勾选它！