JavaScript如何让一个div在页面中居中显示？

Question

我可以使用jQuery框架来编写javascript代码，并且可以方便地将任何javascript函数集成到其中。我的问题是，当我单击链接时，会出现一个淡入的div。我该如何让它在页面中居中对齐，并在滚动时保持位置不变。

下面是我当前实现的示例：

HTML代码：

<div id="dividname">
    <h2>Heading Goes Here</h2>
    <p>content goes here</p>

    <p><a href="#" class="close-box">Close Box</a></p>
</div>

CSS代码：

#dividname {
    position:absolute; z-index:100; width:600px; height:600px; display:none;
}

jQuery代码：

$(document).ready(
    function() {

        // on click show div
        $('a.popup').click(
            function() {
                $('#dividname').fadeIn('slow');
            }
        }

    }
);

- cointilt

---

是的，它必须在IE6中工作。我不想再支持IE6了，但我的一些客户分析显示有足够多的人使用IE6访问网站。 - cointilt

还要感谢大家的回答，我还没有机会测试它们。我会告诉你们它们的效果如何。 - cointilt

Answer 1

试试这个：

#dividname {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    z-index: 100;
    width: 600px;
    height: 600px;
}

当 height 为上下边距(margin-top)的两倍，width 为左右边距(margin-left)的两倍时。

- Gumbo

---

可能是最简单的解决方案。但在IE6中不起作用，新版本IE我不确定。 - Jani Hartikainen

位置：绝对。这将在所有A级浏览器（包括IE 6及以上版本）中很好地居中div。 - cllpse

Answer 2

尝试使用jQuery模态框

如果用户滚动页面，此工具将自动处理移动问题。

// to show
$.blockUI({ message: $('[id$=div]'),
    css: 
    {
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -300px;
    }
 });

// to hide                                    
$.unblockUI({ message: $('[id$=div]') });

- Josh Mein

---

谢谢，我以前用过他们的很多插件。效果非常好！ - cointilt

Answer 3

尝试将您的风格更改为这样：

#dividname {

z-index:100; width:600px; height:600px;
position: fixed;
top: 50%;
left: 50%;

}

希望这能有所帮助！

编辑：

顺便说一下，这是一个在IE6中也能运行的技巧。

* html #dividname {
 position: absolute;
 top: expression((document.documentElement.scrollTop || document.body.scrollTop) +
 Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) /
 100) + 'px');
}

（取自jqModal样式表）

- CalebHC

Answer 4

为了让它随着滚动保持居中，您需要附加一个函数将其移动到滚动位置。

您可以使用以下代码实现：

$(window).scroll(resize())

使用以下代码获取您的当前位置：

$(window).scrollTop();

这将解决IE6的问题。

- Alex