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. ES6学习历程(变量的解构赋值)

    一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1;  b:2;  c:3; let [x, , y] = [1, 2, 3];  x:1   y ...

  2. uva253 Cube painting(UVA - 253)

    题目大意 输入有三种颜色判断两个骰子是否相同 思路(借鉴) ①先用string输入那12个字符,然后for出两个骰子各自的字符串 ②这里用的算法是先找出第一个的三个面与第二个的六个面去比较,如果找到相 ...

  3. OSI 7层模型和 TCP/IP 5层模型

    网络协议通常分不同层次进行开发,每一层分别负责不同的通行功能. 两种参考模型 OSI 和 TCP/IP, OSI 先有模型后有协议,TCP/IP 则相反. OSI 7层模型 - 应用层 - 表示层 - ...

  4. (蓝桥杯)第八届A组C/C++跳蚱蜢

    #include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...

  5. 【codeforces 711B】Chris and Magic Square

    [题目链接]:http://codeforces.com/contest/711/problem/B [题意] 让你在矩阵中一个空白的地方填上一个正数; 使得这个矩阵两个对角线上的和; 每一行的和,每 ...

  6. Postgres 数据库字符集更改 ERROR: new encoding (UTF8) is incompatible

    https://blog.csdn.net/hkyw000/article/details/52817422 http://www.cnblogs.com/taosim/articles/438329 ...

  7. 51nod——T1267 4个数和为0

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题目描述 给出N个整数,你来判断一下是否能够选出4个数,他们的和 ...

  8. 洛谷 P3078 [USACO13MAR]扑克牌型Poker Hands

    P3078 [USACO13MAR]扑克牌型Poker Hands 题目描述 Bessie and her friends are playing a unique version of poker ...

  9. [转]十五天精通WCF——终结篇 那些你需要注意的坑

    终于一路走来,到了本系列的最后一篇了,这一篇也没什么好说的,整体知识框架已经在前面的系列文章中讲完了,wcf的配置众多,如果 不加一些指定配置,你可能会遇到一些灾难性的后果,快来一睹为快吧. 一: 第 ...

  10. Clojure：解决selmer模板不刷新的问题

    当在REPL环境中尝试调试template的时候,会发现每次都需要重启REPL才能看到最新的变化.调查后发现,原来是每次启动REPL的时候,原来的template文件都被放到了target目录中,这样 ...