第一记住一点：父级相对定位，子级绝对定位

下面演示CSS样式：

  .父级DIV{

            margin:0px auto;

            position:relative;

            border:2px solid #ff0000;

            width:1000px;

            height:1000px;

        }

        .子级DIV{

            border:2px solid #00ff21;

            position:absolute;

             margin-top:-300px;

            width:100%;

            height:600px;

            top:50%;

            left:0;

        }

　　下面是HTML代码

<body>

        <div class="父级DIV">

            <div class="子级DIV">

            </div>

        </div>

    </body>

　　要了解原理可以先将子级的margin去掉，查看效果，正常来说会显示如下效果（绿色为子级，红色为父级）

这就说明margin-top:-300px 返还了一半自身的高度，这样就可以达到居中的效果。

还有，有兴趣的可以尝试在页面按住Ctrl然后滑动鼠标滑轮，会发现不管怎么缩放都是垂直居中，至于兼容效果没有去测试，欢迎各位反馈，或者提供更好的方法，也可以扩展相关的知识。

DIV嵌套垂直居中的更多相关文章

  1. div嵌套引起的margin-top不起作用

    通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...

  2. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  3. 实战案例：DIV嵌套

    缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应 ...

  4. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  5. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  6. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. DIV内容垂直居中

    css垂直居中属性设置vertical-align: middle对div不起作用,例如: <!DOCTYPE html> <html lang="zh-CN"& ...

  9. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

随机推荐

  1. BW：如何加载和生成自定义的层次结构，在不使用平面文件的SAP业务信息仓库

    介绍 通常情况下,报告需要在一个类似树的结构来显示数据.通过启用此特性在SAP BW层次结构.高级数据显示的层次结构的顶层节点.更详细的数据可以向下钻取到的层次结构中的下级节点的可视化. 考虑一个例子 ...

  2. 基于Bootstrap的后台通用模板

    人总是比较刁的,世界的时尚趋势不断变化,对系统UI的审美也在不断疲劳中前进,之前觉得好好的UI,过了半年觉得平平无奇,不想再碰,需要寻求新的兴奋点. 下面这套UI就是半年前的(今日:2015-12), ...

  3. 【NLP】word2vec

    http://blog.csdn.net/mytestmy/article/details/26969149?utm_source=tuicool&utm_medium=referral

  4. Spring3系列7- 自动扫描组件或Bean

    Spring3系列7- 自动扫描组件或Bean 一.      Spring Auto Scanning Components —— 自动扫描组件 1.      Declares Component ...

  5. VS2012文本编辑器鼠标不能滚动

  6. javascript中apply()方法解析-简单易懂！

    今天看到了js的call与apply的异同,想着整理一下知识点,发现了一篇好文章,分享过来给大家,写的非常好! 参考: http://www.cnblogs.com/delin/archive/201 ...

  7. dlib库使用

    最近的工作中用到了dlib这个库,该库是一个机器学习的开源库,使用起来很方便,直接包含头文件即可,并且不依赖于其他库(自带图像编解码库源码).不过由于是开源的,所以bug多少有一些,我在example ...

  8. 看上去很美 国内CDN现状与美国对比

    CDN的理想与现实 多年以前,当<Kingdom of Heaven>这部史诗电影发行的时候,中国的影迷使用电驴和BT来寻找种子,而那个时候,高清也才刚刚进入电影领域,我的同事不惜用自家的 ...

  9. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

  10. Maxdos 9.3不能引导系统进入Maxdos

    一.故障描述 最近安装一台新电脑安装的系统版本是windows7_professional_with_sp1_x64,安装完成后想用Maxdos对系统进行备份.出现错误:Warning: the hi ...