DIV嵌套垂直居中
第一记住一点：父级相对定位，子级绝对定位
下面演示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嵌套垂直居中的更多相关文章
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- 实战案例：DIV嵌套
缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应 ...
- 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/ ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- DIV内容垂直居中
css垂直居中属性设置vertical-align: middle对div不起作用,例如: <!DOCTYPE html> <html lang="zh-CN"& ...
- 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 ...
随机推荐
- A cycle was detected in the build path of project
解决Eclipse中Java工程间循环引用而报错的问题 如果我们的项目包含多个工程(project),而它们之间又是循环引用的关系,那么Eclipse在编译时会抛出如下一个错误信息: “A cycle ...
- WebStorm11 注册
WebStorm11 注册 http://2.idea.lanyus.com/
- ORA-12571: TNS:packet writer failure
ORA-12571:TNS:包复写器失效 2007-05-28 22:04 ORA-12571:TNS:包复写器失效 近日一直在做Oracle数据库的搭建(入门),在搭建过程中遇到“ORA-12571 ...
- Swift: 深入理解Core Animation（一）
如果想在底层做一些改变,想实现一些特别的动画,这时除了学习Core Animation之外,别无选择. 最近在看<iOS Core Animation:Advanced Techniques&g ...
- worksteal thread pool
worksteal的场景 对于一个线程池,每个线程有一个队列,想象这种场景,有的线程队列中有大量的比较耗时的任务堆积,而有的线程队列却是空的,现象就是有的线程处于饥饿状态,而有的线程处于消化不良的状态 ...
- JVM性能分析与优化
JVM性能分析与优化: http://www.docin.com/p-757199232.html
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- RDLC报表 在WinForm里运行出现 未能加载文件或程序集microsoft.reportviewer.winforms
做一下记录顺便帮助一下遇到问题的朋友. 做RDLC报表在WinForm运行,在VS里面调试引用了“Microsoft.ReportViewer.Common.dll”和“Microsoft.Repor ...
- 模拟登录神器之PHP基于cURL实现自动模拟登录类
一.构思 从Firefox浏览器拷贝cURL命令(初始页.提交.提交后) 自动分析curl形成模拟登录代码 默认参数:ssl/302/gzip 二.实现 接口 (一)根据curl信息执行并解析结果 p ...
- android html 与webview属性从冲突
在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度. 我们需求是需要显示商品评论,页面设计如下: 调用android代码,对于webview的 ...