Center Div in Browser

[simmy7]

A requirement for the project I am currently working on is that when various links on a page are clicked that the appropriate "layer" (i.e. div) will be displayed centered in the browser. I have tried using various javascript solutions and they center some div's and not others. Does anyone have an example of a way to show and hide a div that is centered in the browser no matter where the div is located in the html?

Any html/css and javascript code examples greatly appreciated!

Thanks
Simmy

[Inny]

sorry, i think i misunderstood you, this might be what you need. example...

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>


<center><div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div></center>





<center><a href="javascript:ReverseContentDisplay('uniquename')">
Click to show/hide.
</a></center>

div that is centered in the browser no matter where the div is located in the html?

You want an absolutely positioned element, in this case the div "unique name" . to do that

<div id="uniquename" style="position: absolute;
              left: 50px;
              top: 50px;
              width: 50px;
              height: 50px;
              display:none;">
<p> content Here </p>
</div>

setting the left & top attributes for centering and width & height for size.

Forgive me if Im wrong. Matt Evans will know, hes a genious! :D

[Inny]

ps center of your browser will need to based on the resolution your site is designed for, eg 800x600 for example.

otherwise you need 'Auto' margin and im not sure how you can do that.