div在浏览器窗口中居中
让div相对于浏览器窗口居中。
方案一：纯粹使用CSS实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
#test {
/*准备一个长200px 宽200px的div，背景设置成黄色*/
width: 200px;
height: 200px;
background-color: #FC0;
/*下面是核心代码*/
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head> <body>
<div id="test"> </div>
</body>
</html>
上面这套方案是比较完美的方案，即便缩放浏览器窗口也能保证div居中。
方案二：利用Javascript实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
#test {
width:200px;
height:200px;
background-color:#FC0;
position:fixed;
}
</style>
<script>
window.onload = function(){
var screen_width = window.screen.availWidth; //获取屏幕宽度
var screen_height = window.screen.availHeight; //获取屏幕高度
var X = (screen_width - 200)/2;
var Y = (screen_height - 200)/2;
var div = document.getElementById("test");
div.style.left=X + "px";
div.style.top=Y + "px";
};
</script>
</head> <body>
<div id="test"></div>
</body>
</html>
几个关键点说明下：
position:fixed 决定div是相对于浏览器窗口居中，而不是相对于一般意义上的父窗口居中。
必须使用window.onload保证在DOM加载完毕后才执行js，<script>标签的defer属性理论上也能实现此效果，但defer属性只有IE浏览器支持，而且，我用了下，没效果。
div在浏览器窗口中居中的更多相关文章
- Frameset框架，在同一个浏览器窗口中显示不止一个页面
总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: 1 <frameset rows="100,*" cols="*& ...
- Helium文档12-WebUI自动化-go_to在当前的Web浏览器窗口中打开指定的URL
前言 go_to在当前的Web浏览器窗口中打开指定的URL 入参介绍 url def go_to(url): """ :param url: URL to open. : ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
- 在浏览器窗口中加载新的url
通常,在前端页面中如果需要跳转到指定页面,可以通过<a>标签进行跳转.而在某些情况下,比如ajax调用之后想直接跳转到指定页面,想跳转页面不能再用<a>标签实现.此时,可以通过 ...
- 如何让div在整个页面中居中？
参考必应主页的样式,在页面中放置一个表格,100%宽高,然后表格内部是一个单元格,在单元格内部放置div,使其margin为auto即可. <table style="height: ...
- 兼容浏览器 div固定浏览器窗口底部 浮动div
css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...
- 通过使用浏览器对象模型，输出当前浏览器窗口中打开的文档的URL信息，并将显示在窗口中。
<script type="text/javascript">window.document.write("这个网页文件来自:".bold());w ...
- 在浏览器窗口内移动的div
------------今天研究了一个最简单的屏保效果----------- 效果图如下:效果很神奇,就是这个div在浏览器窗口不断的灵活移动 代码却很简单 <!DOCTYPE html> ...
- JavaScript 客户端JavaScript之 脚本化浏览器窗口
1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能. 前者是从运行的那一 ...
随机推荐
- php ci 2.0框架 ORM
很早知道ci出了2.0版本了.这几天正好有项目要用ci开发 虽然项目不大.不过也从开发项目的过程中熟悉了CI框架 因为是个电商项目 本来想用个YII2 的. 封装的虽然厉害不过功能强大 因为另个兄弟坚 ...
- maven 检查依赖冲突和版本冲突
maven 检查依赖冲突和版本冲突 在项目发布的时候,一般都需要进行依赖冲突检查或者重复类的检查,这个时候我一般会使用下面的两个命令: 1 2 3 mvn -U clean package - ...
- rabbitmq qos prefetch count的设置与作用
因为原来使用了MQ作为rpc机制,随着客户交易量越来越大,很多服务器推送行情的压力很大,最近打算重写为批量模式,又重新看了下qos和prefetch设置的作用以确定优化的具体细节. 消费者在开启ack ...
- 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00
武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...
- Windows 上的 Jetty 小工具
做项目经常遇到需要开发Java应用,我喜欢用Jetty进行开发.部署,主要是由于Jetty的轻量级. Jetty 项目主页:http://www.eclipse.org/jetty/, 最新版9.30 ...
- 自定义控件设置属性并实时展现并预览在xib中
关键字: // @IBDesignable:实时看到xib设置后的效果 // @IBInspectable:给xib提供设置属性,可以xib中看到此属性 场景: 自定义一个UITextField,并提 ...
- 如何让光标处于EditText的末尾
经测试发现,如果EditText预先有内容,光标自然会在文字的末尾 . 但是如果预先内容为空,然后设置好内容,这种情况下光标自然会在文字的开头,所以这种情况下可以这样做让光标位于末尾: editTex ...
- HandlerThread
一.概念 1.Android中Handler的使用,一般都在UI主线程中执行,因此在Handler接收消息后,处理消息时,不能做一些很耗时的操作,否则将出现ANR错误. 2.HandlerTh ...
- Android Sqlite基本命令
要查看数据库,首先必须要找到db文件,如果拷贝到电脑上,查看的方法比较多,在手机上,用命令查看比较直接和方便. 首先要找到数据库的位置,一般数据库时存放在程序的私有目录,所以要获取root权限. 确保 ...
- sqlserver 附加数据库失败，错误提示：5拒绝访问 解决办法
sqlserver 附加数据库失败,错误提示:5拒绝访问 解决办法 金刚 sqlserver 附加数据库 拒绝访问 今天把项目拷贝到新硬盘里,发现在附加数据库中提示:操作系统错误5:"5拒绝 ...