Hallo, I have a <div> with a table and I would like to be posed exactly in the center of the window. Different user have different screen configuration. How can I know where exactly the center of the window is, and pose the div there?
@konithomimoJan 13.2007 — #Well, the screen width and height can be accessed via, screen.width and screen.height
However, users don't always have the window maximized, and some people have scroll bars enabled while other dont use scroll bar. There for you would need to tka the window height and width, and then the offset height and wifth. Then get the coordinates for the top left corner of the window and find the center.
@tome100Jan 13.2007 — #This is probably a big no no, but what if you put the div position to absolute, then make the width and height 100%, then take your content and put it in another div or table and align it to center and valign it to middle?
@TNOJan 13.2007 — #This should work: (cross-browser vertical alignment)
<i> </i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Universal vertical center with CSS</title> <style> .greenBorder {border: 1px solid green;} /* just borders to see it */ </style> </head>
<body> <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> any text<br> any height<br> any content, for example generated from DB<br> everything is vertically centered </div> </div> </div> </body> </html>
<div id="testdiv">Centering with CSS</div> [/code]
If you position position the layer top:50% left:50% this will place the top left corner of the layer in the middle of the window, then by using margin-left and margin-top and giving a negative value equal to half the width and height repectively the layer is centered.