position an absolute div in middle of screen

[emanuelle]

I am opening a hover div and I want it to be always in the middle of my screen

this is the css for that hover div:
.div_watchedit{position:absolute;visibility:visible;width:735px;height:381px;
margin: auto;z-index:10;background:#fff;}

but the div is positioned left and top 0px. how do i make it in the middle of the screen for every screen resolution???

[rangana]

Try to add highlighted:


.div_watchedit{
position:absolute;
visibility:visible;
width:735px;
height:381px;
margin: auto;
z-index:10;
background:#fff;
top:50%;
left:50%;
margin-top:-190px;
margin-left:-367px;
}


For further reading:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Hope that helps.

[kerrymarke]

margin: 0 auto;

simply it will make your div on center of the screen

example... Div on center of the screen (http://www.corelangs.com/css/box/center-div.html)

kerry

[molendijk]

Jerrymarke's solution only works horizontally.
Rangana's css works well except with small screen resolutions (smaller than 367x190), due to

margin-top:-190px; margin-left:-367px;
which will make some parts of the text in the div invisible with small windows.

So here's another solution (works well if you don't mind about the actual size of the div; the size of the div adapts to the size of the window):

<style type="text/css">
.centerDiv {
position: fixed;
left: 20%; top: 20%; right: 20%; bottom: 20%; //you can adapt this to your requirements; values in pixels are also possible;
border: 1px solid black;
background:#fff;
z-index: 10;
}
</style>