在页面中居中div，但它出现在页面底部

Question

我尝试将HTML页面设置为：

（我认为不需要边界）

但我得到了这个：

Here is my jsFiddle

是否有更多的UX wize arragment来获取带有图例，标题和相关无线电盒的地图？

有没有更优雅的方式来重写我的CSS？我看到很少有人指着echo "<script>$('#modalWrongPassword').openModal();</script>"; 来定位一些div。

我该怎样做？

• 使标题div缩短
• 将整个容器放在页面中间 - 垂直和水平

这是我的CSS：

display: table

这是我的HTML：

    #container {
      height: 600px;
      width: 1100px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

#header {
  padding: 50px;
  background: #93c4d3;
  overflow: hidden;
}

#headerImg,
#headerTitle {
  float: left;
  padding-left: 60px;
}

#map {
  height: 600px;
  width: 1100px;
}

div.lowerSection {
  overflow: hidden;
}

#radioDiv,
#legend {
  float: left;
}

#radioDiv {
  padding-left: 60px;
}

#legend {
  float: right;
  width: 200px;
  height: 100px;
  border: 5px solid cyan;
}

Answer 1

对于标题div，您如何在css中修复其高度

header{ height:fixed value;}

Answer 2

标题可以给出一个固定的高度

#header{ height:60px;}

关于整个集装箱的中心..

这应该使容器居中： -

#container {
      height: 600px;
      width: 1100px;
      position: absolute;
      top: 50%;
      bottom: 0;
      left: 50%;
      right: 0;
      margin-top: -300px;
      margin-left: -550px;
    }

未经测试..但我认为应该有效

Answer 3

因为你在你的标题填充中只是删除它，它将被缩短..至于容器只是玩高度和宽度（也有你的边缘：自动，这将容器放在屏幕的中间）在在CSS中#container {}你应该找到你的偏好。简单：）