将比屏幕宽的div中心对齐到屏幕中心。

Question

我有一个图像嵌套在几个div中。图像的宽度为2000‘s，当浏览器的宽度被设置为小于页面加载时，我希望图像的中心对齐到屏幕的中心，并能够向左/右滚动查看图像的其余部分。我还需要粉红色边框的div跟随图像，保持与现在相同的位置(广场需要停留在英国上空，圆圈在波兰上空)。

到目前为止，我有一个JS小提琴，所以当页面加载时，我希望我放置在地图上的X出现在屏幕的中间，然后仍然能够左右滚动查看地图的其余部分。我还需要将图像保留为图像元素，而不是背景图像，因为我有一个允许缩放的页面特性，但是当我使用背景图像时会得到不理想的结果，但是为了这个问题，我已经删除了所有的代码。

//html
    <div id="map-container">
        <div id="map-inner-container">
        <img src="http://img253.imagevenue.com/aAfkjfp01fo1i-27999/loc573/72685_vector_world_map_v2.2copy_122_573lo.jpg" style="z-index:-9999;">
        <div id="map-1" onclick="showPopup(1)"><!-- UK --></div>
        <div id="map-2" onclick="showPopup(2)"><!-- Poland --></div>
        </div>
    </div>

//css
    #map-container{
        z-index:-9000;
        width:2000px;
        height:1414px;
    }
    #map-inner-container {
        position:relative;
        top:0;
    }

JSFIDDLE：http://jsfiddle.net/Lt4PW/7/

我在这里看过很多其他类似的问题，并尝试了所有的解决方案，但似乎都没有效果。我确实有一次通过让图像中心对齐屏幕的中心来接近屏幕，但是当添加overflow:auto时无法滚动事件。

我发现的所有其他解决方案都只使用css，在img的外部div上有left:50%和margin-left:-1000px /*half of width*/之类的东西，但是由于这样的东西对我不起作用，所以我对JavaScript/jQuery解决方案开放，如果它能工作的话，也可以使用纯css。

当我不知所措时，帮助是非常感激的！

Answer 1

使用jQuery，您可以执行以下操作：

  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  $('body').scrollTop(($('#map-container').height()/2)-(windowHeight/2));
  $('body').scrollLeft(($('#map-container').width()/2)-(windowWidth/2));

小提琴

Answer 2

可以将#map-inner-container的宽度设置为100%，并将overflow-x属性设置为auto。当您的#map-container小于#map-inner-container中的图像时，它将在#map-inner-container底部添加一个滚动条，这样您仍然可以滚动以查看图像的左侧和右侧。我已经将您的#map-container的宽度更改为900px，以模拟这种情况。

#map-container{ z-index:-9000; width:900px; height:1414px;

}

#map-inner-container { position:relative;

 `width: 100%;`

 `overflow-x: auto;     overflow-y: hidden; }`

为了最初显示图像的中心，而不是左侧，您可以使用JQuery的.scrollLeft方法

$("#map-inner-container").scrollLeft(500);

您可以根据需要更改值500。

示例：http://jsfiddle.net/Lt4PW/4/