DIV的绝对居中

简介: 来源:http://www.cnblogs.com/damonlan/archive/2012/04/28/2473525.html 作者:浪迹天涯 很多时候,我们需要在浏览器中让一个div居中进行显示,而不会受到滚动条的影响,那怎么才能得到效果?其实,很简单,你需要理解下面这段就可以了。

来源:http://www.cnblogs.com/damonlan/archive/2012/04/28/2473525.html

作者:浪迹天涯

很多时候,我们需要在浏览器中让一个div居中进行显示,而不会受到滚动条的影响,那怎么才能得到效果?其实,很简单,你需要理解下面这段就可以了。

最前端开人郁闷的就是浏览器的兼容性问题,所以在下面的代码中通过各浏览器的特有属性,来进行判断浏览器的类型。

比如说,self.pageYOffset 如果它为true的话,那么它说明在IE9中起作用,也说明了这个属性在IE9中是独一无二的。

直接看代码:

<script type='text/javascript'>
        function myPopupRelocate() {
            var scrolledX, scrolledY;
            if (self.pageYOffset) {//IE9 起作用
                scrolledX = self.pageXOffset;
                scrolledY = self.pageYOffset;
                alert("self.pageYOffset");
            } else if (document.documentElement && document.documentElement.scrollTop) {// IE 6 ,360浏览器等起作用
                scrolledX = document.documentElement.scrollLeft; 
                scrolledY = document.documentElement.scrollTop;
                alert("document.documentElement && document.documentElement.scrollTop");
            } else if (document.body) {//Chrome... IE9 Firfox....IE 5.5起作用
                scrolledX = document.body.scrollLeft;
                scrolledY = document.body.scrollTop;
                alert("document.body");
            }
           //以上是浏览器滚动的距离
           // alert("scrolledX:" + scrolledX);
           // alert("scrolledY:" + scrolledY);

            var centerX, centerY;
            if (self.innerHeight) {
                centerX = self.innerWidth;
                centerY = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) {
                centerX = document.documentElement.clientWidth;
                centerY = document.documentElement.clientHeight;

            } else if (document.body) {
                centerX = document.body.clientWidth;
                centerY = document.body.clientHeight;
            }

            alert("centerX:" + centerX);
            alert("centerY:" + centerY);

            var leftOffset = scrolledX + (centerX - 250) / 2;
            var topOffset = scrolledY + (centerY - 200) / 2;
            document.getElementById("mypopup").style.top = topOffset + "px";
            document.getElementById("mypopup").style.left = leftOffset + "px";
        }
        function fireMyPopup() {
            myPopupRelocate();
            document.getElementById("mypopup").style.display = "block";
            //            document.body.onscroll = myPopupRelocate;
            //            window.onscroll = myPopupRelocate;
        }
    </script>

HTML Code:

<div id='mypopup' name='mypopup' style='position: absolute; width: 250px; height: 200px;
        display: none; background: #ddd; border: 1px solid #000; z-index: 100'>
        <p>
            我现在的位置是居中状态<br>
            </p>
        <input type='submit' value=' 关闭窗口! (2) ' onclick='document.getElementById("mypopup").style.display="none"'>
    </div>
    <input type='submit' value=' Fire! (2) ' onclick='fireMyPopup()'>

这就能得到在各个浏览器中绝对居中了。当然还有其他的方法,比如说 用css,也OK。

特殊情况:

如果,你不需要居中肿么办呢?很简单啊,你需要改的仅仅是下面这句话:

var leftOffset = scrolledX + (centerX - 250) / 2;
var topOffset = scrolledY + (centerY - 200) / 2;

比如说,你现在把当前的div放到top 100px,left 100px,就需要下面操作:

var leftOffset = scrolledX + 100;
var topOffset = scrolledY + 100;

 

作者:Lanny兰东才
出处:http://www.cnblogs.com/damonlan
Q Q:*********
E_mail:Damon_lan@163.com or Dongcai.lan@hp.com

本博文欢迎大家浏览和转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,在『参考』的文章中,我会表明参考的文章来源,尊重他人版权。若您发现我侵犯了您的版权,请及时与我联系。

 

相关文章
|
5月前
|
存储 弹性计算 安全
阿里云服务器ECS实例选购参考:vCPU到云盘IOPS等指标详解
阿里云服务器ECS实例可以分为多种实例规格族,而根据CPU、内存等配置的不同,一种实例规格族又进一步细分为多种实例规格。这些实例规格包含了众多关键的性能指标,如 vCPU、处理器、内存、vTPM、本地存储、网络带宽、网络收发包 PPS、连接数、弹性网卡、云盘带宽、云盘 IOPS 等。深入理解这些性能指标,对于用户在阿里云服务器购买过程中选择最适合自己业务需求的实例规格至关重要。
|
存储 网络安全 数据处理
阿里云对象存储OSS计费模式按量付费和包年包月选择攻略
阿里云OSS对象存储计费模式分为按量付费和包年包月,默认开通OSS就是按量付费,购买资源包抵扣OSS费用的方式属于包年包月计费模式
3472 0
阿里云对象存储OSS计费模式按量付费和包年包月选择攻略
|
7月前
|
算法 应用服务中间件 网络安全
阿里云WoSign“国密RSA双SSL证书”应用实践
阿里云WoSign品牌SSL证书是阿里云平台热销的国产品牌证书之一,支持签发国密合规的SM2算法SSL证书以及全球信任的RSA算法SSL证书,能够满足平台用户不同的SSL证书应用需求,同时为用户提供国密模块支持,实现“国密/RSA双证书部署”。
660 6
阿里云WoSign“国密RSA双SSL证书”应用实践
|
9月前
|
人工智能 运维 自然语言处理
OS Copilot深度体验:大模型赋能下的操作系统智能助手
作为一名运维工程师,我体验了阿里云推出的OS Copilot,这款操作系统智能助手结合大语言模型与专业知识,提供自然语言问答、辅助命令执行和系统运维调优等功能。通过简单的命令行接口,用户可在主流Linux系统中快速启动这些功能,大幅提升效率,尤其适合复杂任务处理。安装简便,支持批量操作,大幅减少重复劳动。建议尝试,探索AI在系统管理中的潜力。
230 25
OS Copilot深度体验:大模型赋能下的操作系统智能助手
|
7月前
|
存储 人工智能 Cloud Native
小鹏汽车选用阿里云PolarDB,开启AI大模型训练新时代
PolarDB-PG云原生分布式数据库不仅提供了无限的扩展能力,还借助丰富的PostgreSQL生态系统,统一了后台技术栈,极大地简化了运维工作。这种强大的组合不仅提高了系统的稳定性和性能,还为小鹏汽车大模型训练的数据管理带来了前所未有的灵活性和效率。
|
8月前
|
机器学习/深度学习 人工智能 边缘计算
联邦
随着人工智能的发展,联邦学习在打破“数据孤岛”和保护隐私方面展现出巨大潜力,但也面临诸多安全挑战。本文总结了五个关键研究方向:1. 提高防御方法的鲁棒性,以应对多种攻击;2. 研究更多样化的攻击手段,促进防御进步;3. 提升通信效率,平衡安全与性能;4. 探索异构联邦学习,拓展应用场景;5. 增强模型可解释性,确保应用安全。未来需深入研究这些方向,推动联邦学习成为数据安全领域的关键技术。
|
10月前
|
人工智能 数据处理 语音技术
LatentLM:微软联合清华大学推出的多模态生成模型,能够统一处理和生成图像、文本、音频和语音合成
LatentLM是由微软研究院和清华大学联合推出的多模态生成模型,能够统一处理离散和连续数据,具备高性能图像生成、多模态大型语言模型集成等功能,展现出卓越的多模态任务处理能力。
276 29
LatentLM:微软联合清华大学推出的多模态生成模型,能够统一处理和生成图像、文本、音频和语音合成
|
8月前
|
测试技术 API 数据安全/隐私保护
API 调试与管理工具选型思考:Apifox 和 Apipost,企业究竟该如何选择?
在企业级 API 调试与管理场景中,选择一款高效的工具至关重要。市面上的调试工具琳琅满目,而 Apifox 和 Apipost 是近几年两款备受开发者关注的 API 工具。二者都宣称为团队协作和接口调试赋能,但对企业来说,究竟谁才是更适合的选择呢?本文将从功能对比、用户体验、企业适配度和性价比等多个维度做一次全面解析,帮助你做出更明智的选择。
214 1
|
8月前
|
机器学习/深度学习 存储 测试技术
RT-DETR改进策略【模型轻量化】| EMO:ICCV 2023,结构简洁的轻量化自注意力模型
RT-DETR改进策略【模型轻量化】| EMO:ICCV 2023,结构简洁的轻量化自注意力模型
244 0
RT-DETR改进策略【模型轻量化】| EMO:ICCV 2023,结构简洁的轻量化自注意力模型
|
10月前
|
JSON 数据库 数据格式
[开发技巧] 如何获取汉字笔画数?
在开发卜筮小脚本时遇到获取汉字笔画数的需求,起初尝试使用`pypinyin`库却未得理想结果。经过探索,发现Unicode联盟维护的Unihan数据库提供准确的汉字笔画数据。通过下载Unihan数据库文件,解析其中的`kTotalStrokes`字段,利用正则表达式提取所需信息,并将其保存为JSON格式以供快速查询。最终编写函数`get_character_stroke_count`实现任意汉字笔画数的高效获取,满足了项目需求并提供了准确的数据支持。此方法不仅解决了问题,还为类似需求提供了参考方案。
238 10
[开发技巧] 如何获取汉字笔画数?