html

<body>

    <div id="centerDiv">自动适应水平和垂直居中</div>

</body>

css

*{margin:;padding:;}

    #centerDiv{width:834px; height:550px; border:1px solid #9f9f9f;

             position:absolute;

             left:50%;margin-left:-417px;

             top:50%;margin-top:-275px;

         }

原理就是:先用left:50%;top:50%让这个div的左上角居于页面的正中,然后用margin-left:-417px;margin-top:-275px;使div向左向上移动它自身宽高的一半.

div自动适应浏览器窗口水平和垂直居中的更多相关文章

  1. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  2. 如何让DIV在窗口水平和垂直居中

    本实例以新文档开始 2 先放置一个div,并且设置class名为aa,赋予它css属性: width:0;height:0;position:fixed;left:50%;rigth:50%;top: ...

  3. css系列（布局）：实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

  4. div高度随浏览器窗口高度变化；

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

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

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

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

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

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

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

  8. JS小积累（二）— 自动获取浏览器尺寸

    JS小积累-获取浏览器窗口尺寸 作者: 狐狸家的鱼 GitHub:八至 autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高 ...

  9. 让div垂直居中于浏览器窗口

    <style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin ...

随机推荐

  1. CentOS7.2下安装php加速软件Xcache

    说明: php安装目录:/usr/local/php php.ini配置文件路径:/usr/local/php/etc/php.ini Nginx安装目录:/usr/local/nginx Nginx ...

  2. RHEL6 配置Yum库

    在/mnt目录下创建子目录“/cdrom”(用于将iso文件挂载到此目录下) 镜像状态确定为“已连接”(“已连接”未勾选的情况下无法获得iso文件) 配置自动挂载文件 (系统开机时会主动读取“/etc ...

  3. BUAA_OO_博客作业一

    BUAA_OO_博客作业一 (一)程序结构分析 1.代码统计 第一次作业 第二次作业 第三次作业 代码复杂度展示第三次作业的 method ev(G) iv(G) v(G) Constant.Cons ...

  4. Tensorflow MNIST浅层神经网络的解释和答复

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51416540 看到之前的一篇博文:深入 ...

  5. mysql :=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:= := 不只在set和update时时赋值的作用,在select也是 ...

  6. StackOverflow 这么大，它的架构是怎么样的

    原文地 [伯乐在线补充]:Nick Craver 是 StackOverflow 的软件工程师 & 网站可靠性工程师. 这是「解密 Stack Overflow 架构」系列的第一篇,本系列会有 ...

  7. [bzoj2743][HEOI2012]采花_树状数组

    采花 bzoj-2743 HEOI-2012 题目大意:给定n朵花,每朵花有一个种类,m次询问:一段区间中至少出现两朵花的种类的个数. 注释:$1\le n,m\le10^6$. 想法:这个题超级像H ...

  8. hibernate即时获取数据库信息

    由于读取数据的时候,Hibernate将第一次读取的内容放到了缓存中,若此时有别的应用修改了数据库中的数据,程序再次读取的时候,内容是从缓存中直接获取,无法反映数据库中的最新状况. 因此,可以设置读取 ...

  9. [Jest] Write data driven tests in Jest with test.each

    Often, we end up creating multiple unit tests for the same unit of code to make sure it behaves as e ...

  10. STL源代码剖析 容器 stl_stack.h

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie stack ---------------------------------------- ...