html - 将较大的 div 居中在一个较小的 div 中并溢出

Question

我找不到或弄清楚。

在带有溢出的 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% 中改变。

Answer 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)
})

这就是这里所做的