将较大的 div 居中在一个较小的 div 中并溢出答案

【问题标题】：Center a bigger div inside a smaller div with overflow将较大的 div 居中在一个较小的 div 中并溢出
【发布时间】：2013-01-07 09:31:07
【问题描述】：

我找不到或想不通。

在一个带有溢出的 div 中，我放置了另一个带有缩放选项的 div。我喜欢通过缩放使内部 div 在外部 div 中居中，但像 margin: 0px auto; 这样的解决方案不起作用。

<div  id="container" style="float:left; overflow:scroll; width:644px; height:702px;">
  <div  id="zoomimg" style="zoom:54%;">
  <img src="plattegrond.jpg" class="map" usemap="#leige">
  </div>
</div>

注意！ zoom:54% (644x702) 可以用 JS 在 100% 和 150% 中改变。

【问题讨论】：

标签： html styles zooming

【解决方案1】：

我遇到了类似的问题。您“有效地”失去了父 div 作为将子 div 居中的参考点。我通过以自身为中心来解决它。这应该有效：

$(window).load(function(){
    width = $("#container").width();
    height = $("#container").height();
    margL = $(".map").width()/2 -width/2;
    margT = $(".map").height()/2 - height/2;
    $(".map").css('margin-left',-margL)
    $(".map").css('margin-top',-margT)
})

这就是here所做的事情

【讨论】：

不起作用。 .map 必须是 #zoomimg 才能定位 div，但滚动条不会进入中间以向左滚动...