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

Question

我试图将世界地图居中放置在一个全宽和全高的 div 中，但它总是溢出 div(查看 fiddle :http://jsbin.com/bifugahapa/edit?html,output)

这是我用来将一个 div 居中放置在另一个 div 中的代码，以便将其绘制在较小的 div 上，因此即使它溢出也不会产生滚动条:

<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