my overlay is not being centered using css_问答_开发者

my overlay is not being centered using css

开发者 https://www.devze.com 2023-01-11 00:07 出处：网络

<head> <title>Overlay test</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />

相关专题：css javascript

<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 j开发者_JAVA百科ust trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.

Thanks

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.

Try setting the top and left attributes on your overlay.

Use % to set top and left position. Set css attribute top:10%; Left 40%;