在视口中居中一个点/div

Question

我们有一个大图像设置为背景的 div。在大多数情况下，背景图像会比 div 大。因此 div 背景平移。 （参考Fiddle）。

图片是带有房间的平面图。
房间由一些带有某个位置 (x,y) 的标记表示。 （暂时未在示例中显示）

<div class="bg-img"></div>

<p>
    <input type="button" value="center on a point" id="center"/>
</p>

div.bg-img {
    background-image: url(http://www.bumc.bu.edu/supportingbusm/files/2012/01/Typical-Floor-Plan.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: blue;
    border: 1px solid #aaa;
    width: 450px;
    height: 450px;
    margin: 25px auto;        
}

Fiddle for the same is here

用于移动div背景的代码是@jQuery - drag div css background

我们想要的是在视口中将图像内的已知点 (x,y) 居中。 （或以已知点为中心？）

点 (x,y) 将是房间的位置。当用户点击任何房间时 从列表中，视口应平移到房间的位置。所有的房间都有一些 预定义的 (x,y) 位置。（类似于谷歌地图如何将其地图集中在标记位置上）。此外，如果房间/点位于地图的边缘，请将其带入 视口也足够了。

无法弄清楚如何使视口部分居中。有什么线索吗？

注意 1：在下面的示例中，用户单击“房间 3”，“房间 3”被平移到视图中并在视口中居中。

注意 2：房间 3 没有显示在视口的中心（假设是）， 只是为了清楚起见粗略的图片。示例中也没有显示房间标记。

Fiddle for the same is here

Answer 1

您可能希望将背景位置 x 和 y 坐标分别设置为 center.x - point.x 和 center.y - point.y。例如，如果背景图像是 100px 宽 x 200px 高，则 center.x 为 50，center.y 为 50。因此，如果您想定位背景图像以使位置 (75, 75) 居中，则背景图像将位于 (-25px, -25px) 的位置以将其向上和向左拉，这样相对于视口，向右 75px 和向下 75px 现在在向左 50px 和向下 50px 处。