让div垂直以及水平居中浏览器窗口

简介:

首们需要position:absolute;绝对定位,或者position:fixed。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

.site_nav{position:fixed; z-index: 2; padding:6px 10px; left:50%; top:50%; margin:-150px 0 0 -200px;}










本文转自 小眼儿 博客园博客,原文链接:http://www.cnblogs.com/hujunzheng/p/4135755.html,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
224 1
|
27天前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
25 2
|
2月前
|
数据采集 Web App开发 JavaScript
快速参考:用C# Selenium实现浏览器窗口缩放的步骤
在C#结合Selenium的网络爬虫应用中,掌握浏览器窗口缩放、代理IP、cookie与user-agent设置至关重要。本文详述了如何配置代理(如亿牛云加强版),自定义用户代理,启动ChromeDriver,并访问目标网站如抖音。通过执行JavaScript代码实现页面缩放至75%,并添加cookie增强匿名性。此策略有效规避反爬机制,提升数据抓取的准确度与范围。代码示例展示了整个流程,确保爬虫操作的灵活性与高效性。
|
3月前
|
编解码 JavaScript 前端开发
**BOM**是浏览器对象模型,用于控制浏览器窗口
【6月更文挑战第22天】**BOM**是浏览器对象模型,用于控制浏览器窗口,如`window`、`navigator`、`location`等,提供弹窗、定时器及事件处理功能。**DOM**是文档对象模型,将HTML文档转化为可编程的树结构,允许创建、修改元素及处理事件。两者协同工作,赋能JavaScript与网页交互。
21 2
|
2月前
div高度填满浏览器剩余空间(不出现纵向滚动条)
div高度填满浏览器剩余空间(不出现纵向滚动条)
22 0
|
3月前
|
SQL 缓存 数据管理
数据管理DMS产品使用合集之打开多个SQL窗口,在关闭浏览器重新登录只剩第一个窗口且部分脚本丢失,是什么导致的
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
43 0
|
3月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
4月前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
110 0
|
4月前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十一)-java+ selenium自动化测试-浏览器窗口的句柄(详细教程)
【4月更文挑战第13天】本文介绍了如何获取浏览器窗口句柄,句柄是标识浏览器窗口的唯一ID。文章首先解释了窗口句柄的概念,然后通过Java代码示例展示了在单个、多个窗口句柄情况下的操作,包括打印单个窗口句柄和获取所有窗口句柄的方法。在多窗口句柄的场景中,代码演示了如何在不同标签页之间切换。最后,文章强调了句柄在实际操作中的重要性,特别是在处理多个窗口时。
81 0