Home/ Questions/Q 972949
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:12:22+00:00

<head> <title>Overlay test</title> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <style type=text/css> #overlay { position: absolute;

  • 0
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
    position: absolute;
    background-color: #ccffcc;
    display: none;
    height: 200px;
    margin: 0 auto;
    width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
    document.getElementById("overlay").style.display = "none";
}

function show() {
    document.getElementById("overlay").style.display = "block";
}
//]]>
</script>

so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I’ve set the margin: 0 auto; which should be doing the trick shouldnt it?

I’m just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Margin: 0 auto won’t work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.

    • 0