在视口中居中一个点/ 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未完全显示在视口的中心（假设它是）， 只是为了清晰粗糙的pic。此外，房间标记未在示例中显示。

Fiddle for the same is here

Answer 1

您可能希望将背景位置x和y坐标分别设置为center.x - point.x和center.y - point.y。例如，如果背景图像宽100像素×高200像素，则center.x为50，center.y为50.因此，如果要定位背景图像以使位置（75,75）居中，则背景图像将位于（-25px，-25px）以将其拉向左侧，使得75px向右，75px向下，相对于视口，向左50px，向下50px。