PDA

View Full Version : Help me please. div centered

jautrus
09-10-2006, 10:56 PM
Hi, i have one big headache...

I need to display a DIV (400px by 300px) in EXACT center (vertical and horizontal) of the browser window in response of some events. It’s not very hard to do this by making the DIV position absolute and calculating and setting its left and top values. Problem arises when user scrolls the page and then DIV is displayed. Now DIV does not account for the scroll.

What I need is a solution to EXACTLY center (horizontally and vertically) a DIV in a browser window whenever it is displayed, regardless of browser window size or screen resolution or the amount of page that has been scrolled. If it keeps its center position even after being displayed and scrolled by the user then it would be much better.

The solution should work at least with IE and Firefox.
Please help me...
i almost lost the hope.... :/

Here is an image with more explonation: http://www.astavo.lt/div.gif
_Aerospace_Eng_
09-11-2006, 01:42 AM
Example 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.box {
width:400px;
height:300px;
background:#F00;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
text-align:center;
color:#FFF;
}
</style>
</head>

<body>
<div class="box">This is centered vertically and horizontally.</div>
</body>
</html>
Example 2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
height:100%;
}
#main {
width:100%;
display:table;
}
#mainhold {
display:table-cell;
vertical-align:middle;
}
.box {
width:400px;
height:300px;
background:#F00;
text-align:center;
color:#FFF;
margin:auto;
position:relative;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#mainhold {
top:50%;
position:absolute;
}
.box {
top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="mainhold">
<div class="box">This is centered vertically and horizontally.</div>
</div>
</div>
</body>
</html>