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