如何在两个 div 中居中 Datamaps 世界地图

Question

我正在尝试将世界地图居中放置在全宽和全高 div 中，但它总是溢出 div（视图 fiddle：http://jsbin.com/bifugahapa/edit?html,output )

这是我用来将一个 div 置于另一个 div 中心的代码，以便将它绘制在较小的 div 上，所以即使它确实溢出，它也不会' t 产生滚动条：

<div id="container1" style="
                           position: relative; 
                           width: 100%; 
                           height:95%; 
                           background-color: darkblue; 
                           padding-top: 40px">
     <div id="datamap" style="
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
        max-height: 500px;
        height: 95%;
        width: 95%;
        background-color: black
        ">
     </div>
</div>

有什么方法可以缩放世界地图或使内部居中div？

Answer 1

如果我没理解错的话，你可以把你的display:table-cell改为display: block。

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    max-height: 500px;
    height: 95%;
    width: 95%;
    background-color: black
  }

更新：

要使其垂直居中，您可以使用 position: absolute

例如

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    background-color: black;
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
  }

Working sample

更新：

设置 height 100% 需要您的父容器设置高度，因为您使用的是 % 但在那种情况下 body 您没有设置任何高度。因此，要将该集合 height: 100% 固定为 html 和 body 元素。

html,正文{ 高度：100% }

Working code

如何在两个 div 中居中 Datamaps 世界地图

How to center a Datamaps world map in two divs

html

css

datamaps