<style type="text/css">
 
 div  {
   position:absolute;
   top:50%;
   left:50%;
   margin:-150px 0 0 -200px;
   width:400px;
   height:300px;
   border:1px solid #008800;
 }

</style>
<div>让层垂直居中于浏览器窗口</div>

其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

jQuery实现水平和垂直居中

jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:

$(window).resize(function(){     $(".mydiv").css({         position: "absolute",         left: ($(window).width() - $(".mydiv").outerWidth())/2,         top: ($(window).height() - $(".mydiv").outerHeight())/2     });        }); 

此外在页面载入时,就需要调用resize()。

$(function(){     $(window).resize(); }); 

此方法的好处就是不需要知道DIV的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。

tips:在页面的外面建一个table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就OK拉!

让div垂直居中于浏览器窗口的更多相关文章

  1. div自动适应浏览器窗口水平和垂直居中

    html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} ...

  2. div高度随浏览器窗口高度变化;

    通过实际测试,按照网上的说法通过设置html,body{height: 100%:}, 然后让div以100%继承body的高度,这种做法是错误的,必须得上级有个设置固定的高度. 原生js代码(参照网 ...

  3. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 动态获取div的高度 随着窗口变化而变化

    // 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...

  5. div垂直居中的问题

    工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...

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

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

  7. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

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

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

  9. 让div垂直以及水平居中浏览器窗口

    首们需要position:absolute;绝对定位,或者position:fixed.而层的定位点,使用外补丁margin负值的方法.负值的大小为层自身宽度高度除以二. 如:一个层宽度是400,高度 ...

随机推荐

  1. gitbook生成的_book文件本地打开后链接失效问题

    Gitbook 生成本地 html 的问题 在本地用 gitbook-cli根据 Summary 生成目录 然后在每个 md 文件里书写内容 然后用 gitbook serve .生成本地 html ...

  2. BZOJ 4011 HNOI2015 落忆枫音 DAG上的dp(实际上重点在于分析)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4011 题意概述:给出一张N点的DAG(从1可以到达所有的点),点1的入度为0.现在加一条原 ...

  3. SpringMVC 上传图片保存到服务器 同时更改图片名称保存至数据库

    @RequestMapping(value = "/save.do", method = RequestMethod.POST)    public String saveDriv ...

  4. WebStorm中配置ExtJS

    原文链接:http://zhidao.baidu.com/link?url=yX0wDWrL-b2P8k3JNNI38Fb6keuAgm0j9E-QBL1KfWXrZgLZ88grAOVJvat6dJ ...

  5. 用WebService实现两个整数运算

    最近,项目开发中需要用到Web Service.自己在网上搜集资料.自己做了一个小例子,用来加深自己对Web Service理解. 概念:Web Service主要是为了使原来各孤立的站点之间的信息能 ...

  6. Luogu3952 NOIP2017时间复杂度

    搞一个栈模拟即可.对比一下和一年前考场上的代码233 //2018.11.8 #include<iostream> #include<cstdio> #include<c ...

  7. hdu 2199 Can you solve this equation? (二分法)

    Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  8. IIS 发布后无法连接数据库(应用池问题)

    查找网站对应的  应用池,修改为 .net4.0  然后设置启动32位应用程序为 True

  9. [CF1065C]Make It Equal

    题目大意:$n$列箱子,横向消除,一次可以把一行及以上的所有箱子消除,但是一次最多只可以消除$k$个,求最少用几次把箱子的高度变成一样 题解:贪心,求出比一个高度高的有几个箱子,消除即可 卡点:代码改 ...

  10. [洛谷P2174]小Z的神奇数列

    题目大意:有$n(n\leqslant10^6)$个数,$5$种操作: $D\;x:$从数列中删除$x$,相同的数只删除一个 $B:$最大值 $S:$最小值 $M:$输出$max^{min}\pmod ...