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

下面演示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. 菜鸟学JS（四）——javascript为按钮注册回车事件（设置默认按钮）

    不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今 ...

  2. Mac 安装终端软件

    1.安装或者重新安装lua环境 下载 lua 地址: http://www.lua.org/versions.html 1.进入 lua 目录 2.make macosx 3.sudo make in ...

  3. centos 7.0 下触发器乱码的解决

    [root@iZ62jhlmmZ ~]# uname -a Linux iZ62jhlmsymZ 3.10.0-123.13.2.el7.x86_64 #1 SMP Thu Dec 18 14:09: ...

  4. dnspod动态域名使用感受

    继花生壳不能用之后,3322也开始不太好用了,首先就是360把所有3322的域名全部判定为危险域名,甚至拦截程序对于3322url的api请求. 所以想把3322换成我们自己的独立域名,但是3322他 ...

  5. 开发者app 上传收集

    直接使用酷传  看各个市场目录 http://publish.coolchuan.com/myaccount/accounts 注册帐号 百度开发者 http://jingyan.baidu.com/ ...

  6. MYSQL 的一些文件及说明

    1.MySQL库目录下db.opt文件的作用 http://my.oschina.net/u/1462678/blog/232719 2.复制MySQL数据库A到另外一个MySQL数据库B(仅仅针对i ...

  7. android_audio

    参考   source.android.com/devices/audio.html

  8. JIT

    http://www.cppblog.com/vczh/category/9583.html

  9. Java Web 工作技巧总结 16.10

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! 在你成为领导者以前,成功只同自己的成长有关.当你成为领导者以后,成功都同别人的成长有关. 1.聊 ...

  10. Android源码网站

    https://mirrors.tuna.tsinghua.edu.cn/ https://mirrors.tuna.tsinghua.edu.cn/help/AOSP/ https://mirror ...