Question

I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?

<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>

This is what almost works for me, but need to put the CENTERED layer OVER the map

Answer 1

Can you reveal some code?

I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.

I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

Specifically, the CSS of the div to be centered would look something like this.

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

---

Update

Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:

http://jsfiddle.net/2zaxd/

Here’s the HTML (similar to what you had).

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

and the 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;
}

​This centers the inner div above your map via absolute positioning.