Javascript 在页面中居中放置一个div，但它会显示在页面底部

我尝试将HTML页面设置为如下所示：

（我认为不需要边界）

但我要说的是：

是否有更多的UX wize排列来获得带有图例、标题和相关广播框的地图

有没有更优雅的方式来重新编写我的css？我看到很少有人指着

display:table

将一些div居中

我怎样才能做到以下几点

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

这是我的CSS：

    #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;
}

这是我的HTML：

<div id="container">
    <div id="header">

        <img id="headerImg" src="images/marker-icon-2x.png">
        <h1 id="headerTitle"> My Title </h1>

    </div>

    <div id="map"></div>
    <div id="lowerSection">
        <div id="radioDiv">
            <select name="dropdown" size=1>
                <option value="-1">none</option>
                <option value="0">1st alternative</option>
                <option value="1">2nd alternative</option>
                <option value="2">3rd alternative</option>
                <option value="3">4th alternative</option>
            </select>
            <br/>
            <br/>

            <input id="startRadio" type="radio" name="marker" value="0" checked="checked"> start
            <input id="marker_0" type="text">
            <br/>
            <br/>
            <input id="endRadio" type="radio" name="marker" value="1"> end
            <input id="marker_1" type="text">
            <br/>
            <br/>
            <button id="compare_btn" type="button">Beta vs. Prod</button>
        </div>

        <div id="legend">
            <h3>legend:</h3>
        </div>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="routes.js"></script>-->
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/beta_map.js"></script>

我的头衔
没有一个
第一种选择
第二种选择
第三种选择
第四种选择




开始




结束




贝塔vs.Prod
图例：

对于header div，您可以在css中固定其高度

header{ height:fixed value;}

---

可以给收割台一个固定的高度

#header{ height:60px;}

关于使整个容器居中

这将使容器居中：-

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

---

未经测试。。但是我认为应该可以

因为你的页眉中有填充，只要去掉它，它就会被缩短..至于容器，只需在#容器{}处调整高度和宽度（还有边距：auto，这会将容器放在屏幕中间）在css中，您应该找到您的首选项..Simple:）

如果您可以发布单独的问题，而不是将您的问题合并为一个问题，则更可取。这样，它可以帮助人们回答你的问题，也可以帮助其他人寻找至少一个你的问题。谢谢至于你的实际标题问题——我对你的声誉感到惊讶，你在发布这样一个糟糕的问题之前没有进行更多的搜索。“使标题间隔更短”？您可以为页眉使用固定的

高度

，或减少其子项的填充/边距和字体大小。请注意，默认情况下，

h1

是如何通过浏览器应用

user agent

样式的。