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 ...
随机推荐
- 封装一个UILabel圆形边框显示进度
封装了一个UILabel并让它显示圆形的边框,UILabel上面显示百份比,而边框则用Animation绘制到整个圆占指定百分比的点. 这只是我个人想的继承一个UILabel实现的,用到两个CASha ...
- 1. 初探MongoDB —— 介绍、安装和配置
一.写在前面 之前一直以来,都是使用关系型数据库.也很早就听闻,当数据量大的时候,关系型数据库使用起来会有很多问题.诸如查询数据慢,加载花费时间长等等. 也早就耳闻NOSQL(NoSQL = Not ...
- Run same command on all SQL Server databases without cursors
original: https://www.mssqltips.com/sqlservertip/1414/run-same-command-on-all-sql-server-databases-w ...
- 解决yum错误：Cannot retrieve repository metadata (repomd.xml) for repository
解决方法如下: # cd /etc/ #ls 找到yum.repos.d这个目录,里面有个文件CentOS-Media.repo(你的机器里也许不是这个名字,名称应该是自定义的),vi 编译一下里面的 ...
- winform c#绑定combobox下拉框 年度代码。
winform c#绑定combobox下拉框 年度代码. comboBox1.Items.AddRange("});//邦定数据 comboBox1.Text = DateTime.Now ...
- Spring3系列9- Spring AOP——Advice
Spring3系列9- Spring AOP——Advice Spring AOP即Aspect-oriented programming,面向切面编程,是作为面向对象编程的一种补充,专门用于处理系统 ...
- Oracle10g新特性——正则表达式 - 转
在进行查询时,有时候需要按照一定的特殊规则来查找某个字符串,比如,你可能需要查询第三位为5-8,最后四位为’8888’的所有电话.在9i之前,你可能需要写一个很复杂的条件:Select usernam ...
- unity web player的debug和log信息
win8模式下 unity web player的报错信息在如下目录下:C:\Users\xxx\AppData\Local\Temp\UnityWebPlayer\log 注:目录里的文件可能被隐藏 ...
- ICMP type code 对应表(转)
ICMP类型 TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x 3 0 Network Unreachable——网 ...
- POJ 2234 Matches Game
Matches Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7567 Accepted: 4327 Desc ...