Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a div centered on screen (using width:75%;height:50%;margin: 0 auto;) When I init the map div with OL , it auto aligned to the left. How can I keep having the div in the center of the window?

share|improve this question
Have you tried using a child div to hold the map? – lynxlynxlynx Mar 15 '13 at 20:38

Your div containing map must be positioned absolutely. If you know the required height and width of your map, it could be as follows:

    position: absolute!important;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px!important; /*negative half of height*/
    margin-left: -200px!important; /*negative half of width*/

Note the !important rule. It will override the default css properties set by OpenLayers. In case you are not sure about absolute height and width of your map div, you can use .width() and .height(). Calculate scrren width and height, and set css properties of map div from javascript.

share|improve this answer
thank you. what will happen when I resize the screen ? – Alophind Mar 17 '13 at 12:23

CSS Code

    width: 75%;
    margin: 0 auto;


<div class="centerDiv">

Full source... Div on center

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.