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. adjtimex和时钟的几个概念tick,freq,ppm,jiffies

    adjtimex使用 今天遇到一个ntp的同步问题.服务器上配置好了ntpd,在启动前也手动进行过同步,但是过段时间ntpq查询发现服务器即便能选出同步服务器,但是系统的时间偏差越来越大. 服务器上实 ...

  2. HDU - 2159 FATE（二维dp之01背包问题）

    题目: ​ 思路: 二维dp,完全背包,状态转移方程dp[i][z] = max(dp[i][z], dp[i-1][z-a[j]]+b[j]),dp[i][z]表示在杀i个怪,消耗z个容忍度的情况下 ...

  3. isset在php5.6-和php7.0+的一些差异

    今天在公司实现一个模块功能时写了如下代码: class ProductCategory { const TYPES = [ 1 => 'type1', 2 => 'type2', ]; p ...

  4. 第二节：numpy之数组切片、数据类型转换、随机数组

  5. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  6. c语言文件包含

    文件包含是指一个C语言源程序中将另一个C语言源程序包含进来,通过include预处理指令实现. 一般形式: #include”被包含文件名” 或#include<被包含文件名> 2.  作 ...

  7. UNIX环境编程学习——反思认识

     学习情况: 有关UNIX系统环境编程的学习时间用来非常长的时间.可是感觉效果还是不是太好,在中间经过了期末考试.用来非常长的时间用来学习专业课.就将该过程的学习放到了一边上,放假以后又回家造成了 ...

  8. Smobiler实现列表展示—GridView（开发日志十二）

    一.列表功能展示   二.具体步骤 2.1,列表控件设计部分 2.1-① 在窗口SmoiblerForm1中加入gridview控件   2.1-② 在属性栏设置gridview控件的大小和位置   ...

  9. grails一对多双向关联

    前面分享了一些学习grails的心得,可是grails的知识还远不止这些,这次整理了一点有关grails一对多双向关联关系的知识.我认为这样的关联用的地方太多了,这次准备的样例是城市和区域的相关样例. ...

  10. C++开发人脸性别识别总结

    历时一个月,最终在昨天把<C++开发人脸性别识别总结>系列博客完毕了,第一篇博客发表在2015年12月29日,截止昨天2016年2月29日最后一篇完毕,去除中间一个月的寒假,正好一个月,首 ...