jquery - 如何将可滚动div滚动到确切的中心？

如何以编程方式滚动div以使其内容居中？

这是我正在尝试的方法，无法正常工作

fiddle

$("button").click(function () {
    var outerDiv = $("#outerDiv");
    var img = $("img");
    outerDiv[0].scrollTop = img.height() / 2;
    outerDiv[0].scrollLeft = img.width() / 2;
});

div的内容可以动态更改，可以调整大小。
小提琴只是为了获得问题的有效概念，因此我可以将其应用于实际生产代码的解决方案。

编辑：澄清一下，当我单击按钮时，我希望div的内容居中。不用像我已经设置的那样将上/下滚动设置为50％。

编辑2：我已经更新了jquery和小提琴，将滚动条设置为内容的一半。

我遇到的问题是，我需要调整滚动点以补偿实际滚动条手柄宽度的一半。

最佳答案

outerDiv[0].scrollTop = img.height() / 2;
outerDiv[0].scrollLeft = img.width() / 2;

这是不正确的。上下滚动也应取决于outerDiv的高度和宽度。

这有效：

outerDiv[0].scrollTop = img.height() / 2 - outerDiv.height()/2;
outerDiv[0].scrollLeft = img.width() / 2 - outerDiv.width()/2;

请参阅http://jsfiddle.net/zBv3v/3/