第一记住一点:父级相对定位,子级绝对定位

下面演示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. struts2:struts.xml配置文件详解

    1. 几个重要的元素 1.1 package元素 package元素用来配置包.在Struts2框架中,包是一个独立的单位,通过name属性来唯一标识包.还可以通过extends属性让一个包继承另一个 ...

  2. [原]quick2.25精灵变灰

    由于quick2.25没有导出shader相应的接口,所以2.25无法直接使用shader. 本文简单介绍如何导出相应接口,同时教大家使用shader 实现精灵变灰 一.编写静态函数,以供导出使用(直 ...

  3. 让Mac也能拥有apt-get类似的功能——Brew

    之前一直怀念ubuntu下的apt-get,因为实在是方便,需要安装什么,一个命令搞定,相关的依赖包统统由apt-get维护.下载,编译,安装,那叫一个痛快.什么软件用着不爽,一个命令卸载! 怀念ap ...

  4. 【转】 IOS开发xcode报错之has been modified since the precompiled header was built

    本文转载自  IOS开发xcode报错之has been modified since the precompiled header was built 其实我是升级xcode到4.6.3的时候遇到的 ...

  5. 可编辑的DIV -编辑器

    找了好多,没几个好用的,都或多或少有问题 目前这个最好用..  不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取  $ ...

  6. tmux protocol version mismatch (client 7, server 6)

    $ tmux attach protocol version mismatch (client 7, server 6) $ pgrep tmux 3429 $ /proc/3429/exe atta ...

  7. 一次受限于操作系统进程数的OOM

    在64bit机上跑应用,结果进程刚起来就挂,就刚起来就挂..还OOM,还fork不出新进程,尼玛,这什么情况? 1. 如果是应用层面OOM,那么不应该任何命令都不被执行了,不应该OS直接crash掉. ...

  8. 学习使用:before和:after伪元素

    如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...

  9. Top100Summit全球案例研究峰会第一天总结——云计算和大数据

    很荣幸受邀参加Top100Summit全球软件案例研究峰会,这次的大会主题是<技术推动商业变革>,组委会从全国投稿的460多件案例中甄选出100件具有代表价值的案例,进行为期4天的分享,第 ...

  10. Android开发艺术探索笔记—— View(一)

    Android开发艺术探索笔记 --View(一) View的基础知识 什么是View View是Android中所有控件的基类.是一种界面层控件的抽象. View的位置参数 参数名 获取方式 含义 ...