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

下面演示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. LCLFramework框架之IOC

    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 借助于"第三方"实现具有依赖关系的对象之间的解 ...

  2. Struts2的属性驱动与模型驱动的区别

    1.Struts2的属性驱动. Struts2的属性驱动指的是在action中JSP页面的每一个form中的name都对应在action中有一个属性与之对应.看下面代码片段: <form act ...

  3. saiku 展示优化第二步（要诀和技巧）

    经历了上几篇博客的分享,可以无密码登录 : http://www.cnblogs.com/liqiu/p/5246015.html 随着使用的深入,公司需要将现有的报表平台与saiku整合,其中最便捷 ...

  4. WinStore控件之Button、HyperlinkButton、RadioButton、CheckBox、progressBar、ScrollViewer、Slider

    1.Button protected override void OnNavigatedTo(NavigationEventArgs e) { /* * Button - 按钮控件,其全部功能是通过其 ...

  5. android-tools-adb

    sudo apt-get install android-tools-adbsudo apt-get install android-tools-fastboot

  6. IT项目经理成长手记

    1.流程化,项目化,工业化: 2.启动,规划,实施,监控,收尾.五个过程 3.需求管理,项目策划,项目监控,集成项目管理,定量项目管理,供应商协议管理,风险管理. 4.项目经理是熬出来的,伟大都是熬出 ...

  7. laravel 5.3 学习之路——路由（资源，别名）

    laravel的路由定义中,其中route:resoure(),可以直接定义类似restful风格的URL 例如:Route::resource('system/role','System\RoleC ...

  8. java-Filter

    java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...

  9. 让我们一起Go（十二）

    前言: 上篇中,我们讲到了在Go语言中如何定义方法,今天,我们将进一步深入Go语言的面向对象编程. 一.Go语言中的接口 首先来看一个最基本的接口: 和定义一个结构体类似,只不过将struct换成了i ...

  10. 内存调试的东西D/dalvikvm( 809 ): GC_CONCURRENT freed

    一般Java虚拟机要求支持verbosegc选项,输出详细的垃圾收集调试信息.dalvik虚拟机很安静的接受verbosegc选项,然后什么都不做.dalvik虚拟机使用自己的一套LOG机制来输出调试 ...