css - 正确的 css div 定位？

Question

我尝试过，但完全无法定位将位于谷歌地图布局之上的界面。我试图做的是:

But I ended up with this

我的格式是这样的:

<div id="GoogleMap"> // the containing google maps layer
    <!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
    <div class="map-topmenu"></div>   //my interface
    <div class="map-leftmenu"></div>  //my interface
    <div class="map-rightmenu"></div> //my interface
    <div class="map-bottommenu"></div>//my interface
</div>

我成功地使顶部菜单水平居中，并且距屏幕顶部 10px。

我一直无法使左右菜单垂直居中，我开始注意到使左侧菜单居中所需的代码变得很奇怪。至于底部菜单，我完全失败了——尽管我尝试了很多不同的方法。

任何人都可以看看我的代码，让我知道我哪里搞砸了吗？非常感谢!

body {
    border: 0 none;
    margin: 0;
    padding: 0;
    height:100%;
}
#GoogleMap {
    position:absolute;
    background-color: grey;
    background-position: 50% 50%;
    background-repeat: repeat;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.map-topmenu {
    height: 52px;
    width: 353px;
    background-image: url(http://i.imgur.com/KlyKR.png);
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    margin-left: 10px;
    top:50%;
    position: absolute;
    margin-top: -150px;
    background-image: url(http://i.imgur.com/Q3d1r.png);
}

.map-rightmenu {
    background-image: url(http://i.imgur.com/si6dl.png);
    height: 147px;
    width: 280px;
    margin-right: 10px;
    float: right;
    top:50%;
}
.map-bottommenu {
    background-image: url(http://i.imgur.com/iDmuP.png);
    height: 52px;
    width: 312px;
    margin-right: auto;
    margin-bottom: 10px;
    bottom: 0;
    margin-left: auto;
}

Answer 1

使用带负边距的绝对定位:

http://jsfiddle.net/PJTDy/3/

#GoogleMap {
    position:absolute;
    background-color: grey;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu {
    z-index:1;
    position:absolute;
    background:blue;
} 
.map-topmenu {
    top:0;
    left:50%;
    margin-left:-176px;
    height: 52px;
    width: 353px;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    left:0px;
    margin-top:-131px;
    top:50%;
}
.map-rightmenu {
    height: 147px;
    width: 280px;
    right:0;
    top:50%;
    margin-top:-73px;
}
.map-bottommenu {
    height: 52px;
    width: 312px;
    bottom: 0;  
    left:50%;
    margin-left:-156px;   
}