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. list.h在用户态下的应用

    一.背景 list.h文件位于linux/include下,内核中链表的操作函数都在其中.它有许多关于链表的操作函数,所以我们可以尝试将list.h拉到用户态中来使用,这样,我们在用户态中若要用到链表 ...

  2. 【codeforces 515D】Drazil and Tiles

    [题目链接]:http://codeforces.com/contest/515/problem/D [题意] 给你一个n*m的格子; 然后让你用1*2的长方形去填格子的空缺; 如果有填满的方案且方案 ...

  3. 2017沈阳网络赛hdu6199 gems gems gems

    gems gems gems Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) P ...

  4. Python 6 数字和布尔值及字符串的基本功能

    数据类型:查看变量数据类型type(变量)  或者  print(type(变量)) 整数int:就是不带小数的自然数字,也叫整型.在2.X版本中还分为长整型和整形.但是在3.X版本中统一称为整数或整 ...

  5. MFS搭建

    MooseFS是一个分布式存储的框架,其具有如下特性:     1.Free(GPL)     2.通用文件系统,不需要修改上层应用就可以使用     3.可以在线扩容,体系架构可伸缩性极强.     ...

  6. install pip 回顾

    在install pip的时候遇到如下问题 1. yum install 想安装一个package 总是提示没有package 可以安装. 但是后来可以了 2. make 和 configure 到底 ...

  7. （IT/互联网行业）你给自己当前的职位拼几分？（评分标准，个人看法，勿喷~）

    常常有身边的关系好的朋友或网友.问如今我该不该跳槽的问题. 我一般给他们的答复你能给当前的工作拼几分. 下面是我自己总结的一个评分标准.如有不当之处,勿喷~ --------------------- ...

  8. 【SDOI2008】【BZOJ2049】Cave 洞穴勘測

    Description 辉辉热衷于洞穴勘測.某天,他依照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘測,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成.而且每条通道连接了恰好 ...

  9. 9.JAVA编程思想 多形性

    欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/51040241 "对于面向对象的程序设计语言,多型性是第三种最主要的特 ...

  10. 卸载完百度影音以后天气助手还在，而且总是自己主动打开ie浏览器，解决方式

    今天暴风影音不好用了.我就安装了百度影音,还有意外发现.相同的视频,用百度影音看不清楚,然后我就直接卸载了.结果卸掉以天气小助手还是在,而且总弹白色小框框,各种广告.最忍不了的是还自己主动打开ie浏览 ...