让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在浏览器窗口中居中的更多相关文章

  1. Frameset框架，在同一个浏览器窗口中显示不止一个页面

    总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: 1 <frameset rows="100,*" cols="*& ...

  2. Helium文档12-WebUI自动化-go_to在当前的Web浏览器窗口中打开指定的URL

    前言 go_to在当前的Web浏览器窗口中打开指定的URL 入参介绍 url def go_to(url): """ :param url: URL to open. : ...

  3. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  4. 在浏览器窗口中加载新的url

    通常,在前端页面中如果需要跳转到指定页面,可以通过<a>标签进行跳转.而在某些情况下,比如ajax调用之后想直接跳转到指定页面,想跳转页面不能再用<a>标签实现.此时,可以通过 ...

  5. 如何让div在整个页面中居中？

    参考必应主页的样式,在页面中放置一个表格,100%宽高,然后表格内部是一个单元格,在单元格内部放置div,使其margin为auto即可. <table style="height: ...

  6. 兼容浏览器 div固定浏览器窗口底部 浮动div

    css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...

  7. 通过使用浏览器对象模型，输出当前浏览器窗口中打开的文档的URL信息，并将显示在窗口中。

    <script type="text/javascript">window.document.write("这个网页文件来自:".bold());w ...

  8. 在浏览器窗口内移动的div

    ------------今天研究了一个最简单的屏保效果----------- 效果图如下:效果很神奇,就是这个div在浏览器窗口不断的灵活移动 代码却很简单 <!DOCTYPE html> ...

  9. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

随机推荐

  1. JS this，call和apply以及回调函数

    this this引用,引用的是一个对象,对象不同或函数调用方式的不同,this引用会根据代码的上下文语境自动改变引用对象的特性. 引用规则 1,在最外层代码中,this引用引用的是全局对象(wind ...

  2. Java经典实例：在文本中匹配换行符

    默认情况下,正则表达式 ^ 和 $ 忽略行结束符,仅分别与整个输入序列的开头和结尾匹配.如果激活 MULTILINE 模式,则 ^ 在输入的开头和行结束符之后(输入的结尾)才发生匹配.处于 MULTI ...

  3. Xdebug文档（一）基本特性

    基本属性(参数) xdebug.default_enable 类型: boolean,默认值: 1 这是xdebug的基本设置,默认在调试跟踪时显示错误信息.可以使用xdebug_disable()函 ...

  4. 模拟Executor策略的实现

    Executor作为现在线程的一个管理工具,就像管理线程的管理器一样,不用像以前一样,通过start来开启线程 Executor将提交线程与执行线程分离开来,使得用户只需要提交线程,并不需要在乎怎么和 ...

  5. 那些年,我们一起疯狂的C#

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  6. Android应用开发基础之十一：新特性

    Fragment 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容 生命周期方法跟Activity一致,可以理解把其为就是一个Activity 定义布局文件作为Fra ...

  7. 优秀案例：12个精美的设计工作室 & 设计公司网站

    如果你正在为自己的作品集网站设计寻找灵感,那么学习设计机构 & 设计公司的网站是如何制作的是一个良好的开端.在这篇稳重,我们已经聚集了一组设计机构的优秀作品集网站,你可以借鉴很多设计理念.当你 ...

  8. (转)轻松学习JavaScript三：JavaScript与HTML的结合

    摘自:http://blog.csdn.net/erlian1992 HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScri ...

  9. 定制Eclipse IDE之功能篇（一）

    上文回顾:定制Eclipse IDE之界面篇   这一篇文章将记录一些Eclipse插件拓展(extension),简单讲述常用拓展的用法,但可能不会那么详细. 我的主要插件的拓展如下:   一.or ...

  10. 微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

    在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input ...