让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# Unicode编码

    为了避免在浏览器中传输数据的时候出现中文乱码,我们可以将内容进行URL编码,当然也可以将内容进行UNICODE编码.将汉字进行UNICODE编码,如:"王"编码后就成了" ...

  2. Python 获取一个对象的名字

    Note: 这里的对象是广义的,一个列表也算 有name的不在讨论之列, 因为可以直接输出 没有name的,可以参考如下代码,使用到的是globals() except_word是用于过滤掉那些不想要 ...

  3. Pexels Videos – 可以免费商业使用的短视频

    Pexels 是一个巨大的平台,提供免费的精美照片,很多设计师和博客每天用它来寻找他们的个人和商业项目的照片.现在我们想介绍 Pexels 视频,他是用来帮助你找到免费的视频.所有的 Pexels 视 ...

  4. 【iScroll源码学习03】iScroll事件机制与滚动条的实现

    前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...

  5. 【初探HTML本相】道之真谛不过自然，html标签脱俗还真

    前言 须弥般若有无空,阴阳道化真虚同:洗尽前恩本非相,还吾面目下九重. 咳咳,其实老夫对佛教文化有点点研究啦,说以我们这里来了一点很有哲理的东西,因为我这里准备干一件很戳的事情,我准备来看看我们的ht ...

  6. css伪元素实现tootip提示框

    先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...

  7. 通过ABAP的标准功能，寻找源代码中的字符串

    程序名称: *ABAP_SOURCE_SCAN 查找 作用:通过这个标准程序,可以在系统的源代码中进行字符串的查找!

  8. ArcGIS中的WKID

    提到坐标系统,大家多少能明白一些,但在运用时,有些朋友搞得不是非常清楚,以后专门来总结.在实地生产项目中,使用较多的2000中国大地坐标系(CGCS2000).1980西安坐标系.1954北京坐标系统 ...

  9. Java虚拟机JVM学习02 类的加载概述

    Java虚拟机JVM学习02 类的加载概述 类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对 ...

  10. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...