Positioning a div

**d-machine** · 03-25-2010, 09:50 PM

Hi,

How can I put a div always on the center of the screen? (vertically and horizontally)

Thanks!

**djr33** · 03-25-2010, 09:52 PM

Are you looking for how to center the div, or how to keep it static (not moving) while the rest of the page moves around it (scrolling, etc.), or perhaps both?

**d-machine** · 03-25-2010, 10:04 PM

I'm looking for how to center the div

Thanks

**molendijk** · 03-25-2010, 10:29 PM

Example:

Code:

<div style="position:absolute; left:50%; top:50%; width: 300px;  height:400px; margin-left:-150px; margin-top: -200px; border: 1px solid black"></div>

margin-left is the negative counterpart of width/2; margin-top is the negative counterpart of height/2.
===
Arie Molendijk.

**d-machine** · 03-26-2010, 06:54 AM

Hi, thank you molendijk,
but it doesn't appear on the middle (horizontally yes, but vertically no) of the screen.

My page is long, so you can scroll there, maybe thats the reason.

I want that the div will appear at the center of the screen, wherever I am in the page, without any need for further scrolling.

**molendijk** · 03-26-2010, 10:53 AM

Code:

<!--[if IE]>
<style ="text/css">
.center{position:absolute;	
top: expression(offsetParent.scrollTop +  ((offsetParent.clientHeight-this.clientHeight)/2) +'px'  );
left: expression(offsetParent.scrollLeft +  ((offsetParent.clientWidth-this.clientWidth)/2) + 'px'); width:200px; height:200px}
body{background: url(foo) fixed}
</style>
<![endif]-->

<!--[if !IE]><!-->
<style type="text/css">
.center{position: fixed; top:50%; left: 50%; width:200px; height:200px; margin-left:-100px; margin-top: -100px}
</style>
<!--<![endif]-->

<div class="center" style="border:1px solid black">centered</div>
===
Arie

**simcomedia** · 03-27-2010, 01:52 AM

1) make sure the div you want displayed in the center has a set width
2) use margin: auto;

**molendijk** · 03-27-2010, 11:32 AM

This is better than what I proposed above, because it does not use IE regular expressions:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div style="position:fixed; border: 1px solid black; height:80%; top:10%; left:20%;width:60% ">Centered and fixed</div>
</body>
</html>

Works in non-IE and in IE7 and above. For IE, you have to use a valid doctype.
===
Arie.