title: How to center a Datamaps world map in two divs
body: <p>I am trying to center the world map in a full width and full height div but it keeps overflowing out of the div (view fiddle: <a href="http://jsbin.com/bifugahapa/edit?html,output" rel="nofollow">http://jsbin.com/bifugahapa/edit?html,output</a>)</p>
  
  <p>Here is the code I am using to center the one div within another div to sort of draw it on a smaller div so even if it does overflow it won't produce scroll bars:</p>
  
  <pre><code>&lt;div id="container1" style="
                             position: relative; 
                             width: 100%; 
                             height:95%; 
                             background-color: darkblue; 
                             padding-top: 40px"&gt;
       &lt;div id="datamap" style="
          display: table-cell;
          vertical-align: middle;
          margin: 0 auto;
          max-height: 500px;
          height: 95%;
          width: 95%;
          background-color: black
          "&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any way to scale the world map or center the inner div?</p>