Как центрировать карту мира Datamaps в двух делениях

Question

Я пытаюсь отцентрировать карту мира по ширине и ширине, но она продолжает вытекать из div (просмотр скрипки: 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%;
  }

Рабочий образец

Обновить:

настройка height100% нужен ваш родительский контейнер установленной высоты, так как вы используете % но в этом случае body Вы не установили никакой высоты. Таким образом, чтобы исправить этот набор height: 100% в html а также body элементы.

html, body {height: 100%}

Рабочий код