CSS，谷歌地图上的 CENTERED 元素答案

【问题标题】：CSS, CENTERED element over Google MapsCSS，谷歌地图上的 CENTERED 元素
【发布时间】：2012-03-31 07:15:10
【问题描述】：

我的网站上有一个 GoogleMaps。我的问题是 CSS，如何做一个位于谷歌地图上的 CENTERED div？

<div style="position:relative">
   <div style="width:300px; height:300px" id="map_localization"></div>
   <div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>

这对我来说几乎是可行的，但需要将 CENTERED 图层放在地图上

【问题讨论】：

你有没有尝试过？
是的，我试过并且做得很好。然后我决定在 stackoverflow 上问你。
你能发布你的代码吗？没有标记很难创建 CSS 规则。并发布一个指向您当前页面的链接来展示问题（如果有）。
人。你这人怎么回事？如果我能做到，我不会问你。如果我能找到它，我不会问你。我问你问题的唯一原因是我做不到。
告诉我们你能做什么！这就是我们所要求的，帮助我们帮助你。在您的尝试中包含您迄今为止生成的标记和 CSS。说我做不到，你的意思是你根本没有尝试过？如果您根本无法做任何事情，那么您有两个选择。 1.自己去学东西。 2. 聘请可以为您完成此任务的开发人员。如果您帮助我们，您和我们的生活会变得更加甜蜜。

标签： css html google-maps-api-3

【解决方案1】：

你能透露一些代码吗？

我会通过将地图和 div 都放在相对定位的 div 中来实现。然后我将绝对定位地图和里面的 div。

我会用绝对定位将 div 居中：http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

具体来说，要居中的 div 的 CSS 看起来像这样。

#divToBeCentered {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

更新

实际上，我制作的这个小提琴说明了我将地图和另一个 div 放在包含 div 中的意思：

http://jsfiddle.net/2zaxd/

这是 HTML（与您所拥有的相似）。

<div id="containerForAll">
   <div id="map_localization"></div>
   <div id="divToBeCentered">CENTERED</div>
</div>

和 CSS。

#containerForAll, #map_localization, #divToBeCentered {
 border: 1px solid #000;   
}

#containerForAll {
 position: relative; 
 width: 300px;
 height: 300px;   
}

#map_localization, #divToBeCentered {
  position: absolute;
}

#map_localization {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}

#divToBeCentered {
 width: 100px;
 height: 100px;
 margin-left: -50px;
 left: 50%;
 top: 50%;
 margin-top: -50px;
}

这将通过绝对定位将内部 div 居中放置在地图上方。

【讨论】：

嗯，你能透露一下你目前在做什么吗？
我通过Phonegap将其作为Android项目进行。只是，请给我一点时间把它剪下来发到这里。
大卫，问题是我不想让我的地图居中。我想在任何地方都有一张地图，但是地图上方的 div 应该居中（根据地图）。
我明白了，不将包含的 div 居中而将包含的 div 居中怎么样？换句话说，#divToBeCentered 和地图都适合单个相对定位的 div。这个外部 div 你可以按照你说的放在任何你想要的地方。
大卫，我刚刚在顶帖中添加了一些额外的信息。我有机会接近解决方案吗？