Question

<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>

所以当用户点击它时会运行show（），它将css框置于顶部。但是我希望它在浏览器中居中。我设置了保证金：0自动;哪个应该做的伎俩呢？

我只是想在不使用jquery的情况下创建叠加功能，因为它似乎与我的学校cms模板不兼容。

由于

Answer 1

保证金：0自动不会对位置绝对元素起作用，它们存在于自己的小世界中，在正常流动之外。所以为了解决这个问题，你需要做一个额外的步骤。 CSS dead centre technique可以在这里使用。

Answer 2

尝试在叠加层上设置顶部和左侧属性。

Answer 3

使用％来设置左上角和左上角。设置css属性top：10％;剩下40％;

我的叠加层没有使用CSS进行居中

3 个答案: