Javascript 在页面上以 div 为中心答案

【问题标题】：Javascript centering a div on the pageJavascript 在页面上以 div 为中心
【发布时间】：2009-07-15 19:08:10
【问题描述】：

对于 javascript，我使用 jQuery 框架，但可以轻松地将任何 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');
            }
        }

    }
);

【问题讨论】：

是的，它必须在 IE6 中工作。我不想再支持 IE6，但我的一些客户分析表明，有足够多的人使用 IE6 访问该网站
也感谢大家的回答，我还没有机会测试它们中的任何一个。我会让你们知道他们的工作情况。

标签： javascript jquery css

【解决方案1】：

试试这个：

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

其中margin-top 和margin-left 分别是height 和width 的一半。

【讨论】：

可能是最简单的解决方案。但是，在 IE6 中不起作用，不确定是否有新的 IE。
职位：绝对。这将使 div 在所有 a 级浏览器（包括 IE 6 及更高版本）中居中。

【解决方案2】：

为 jquery 试试这个modal div

如果用户滚动，此工具将为您处理移动

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

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

【讨论】：

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

【解决方案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 样式表）

【讨论】：

【解决方案4】：

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

你可以这样做：

$(window).scroll(resize())

通过以下方式获取您当前的职位：

$(window).scrollTop();

这将符合 IE6 问题。

【讨论】：