让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. C#开发可以可视化操作的windows服务

    使用C#开发自定义windows服务是一件十分简单的事.那么什么时候,我们需要自己开发windows服务呢,就是当我们需要计算机定期或者一 直执行我们开发的某些程序的时候.我经常看到许多人开发的win ...

  2. 关于linux下DB2创建数据库报错问题

    公司业务需要,把服务搭在中标下,在中标下装了DB2 Express-C v9.7.1,之前用着没有问题,隔了一段时间没用,最近又需要用到它,出了一些菜鸟问题,记录下来以免有人和我犯同样的错误...进入 ...

  3. servlet同一用户不同页面共享数据

    如何实现不同页面之间的数据传递,实现页面的数据共享?常见的方法有以下4种: 1)表单提交(form) 2)sendRedirect()跳转 3)session技术 4)Cookie技术 表单提交 这是 ...

  4. JavaScript学习笔记-表达式和语句

    表达式和语句 eval( ) 只有一个参数 参数非字符串时,直接返回这个参数: 参数为字符串时,它把字符串当成JavaScript代码进行编译,编译失败则抛出语法错误,编译成功则执行代码,并返回最后一 ...

  5. 关于window.onload

    window.onload是当文档加载完成后执行. <script>之间的代码会在代码加载到此处执行.function内的代码是调用时才执行. 但window.onload有个坏处,它非要 ...

  6. JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  7. 请各位帮帮忙：Android LBS应用——CityExplorer (v1.0) 调研

    Hello哇各位亲!! 请各位帮帮忙:Android LBS应用——CityExplorer(V1.0)调研 嗯,这个事情是这样的,要填一个调查问卷,但是问卷中部分问题是关于这个叫做CityExplo ...

  8. Python语法基础

    # coding=utf-8import random teacher = (1 < 3) and (2 > 5)print (teacher) index = random.randin ...

  9. 浅谈Java五大设计原则之代理模式

    我们来定义一下  AOP(面向切面编程) 它是面向对象的一种补充或者是一种增强,它在这基础上增加了一些 而外的功能增强. 它可以在原有的行为不改变的前提,在这之前或者之后完成一些而外 的事情. 而AO ...

  10. Swift开发第九篇——Any和AnyObject&typealias和泛型接口

    本篇分为两部分: 一.Swift中的Any和AnyObject 二.Swift中的typealias和泛型接口 一.Swift中的Any和AnyObject 在 Swift 中,AnyObject 可 ...