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 ...
随机推荐
- 怎么删除github上的仓库
1.到你的个人中心.点击你的个人账号.下图的红色部分 2.点击repositories(仓库),选择你要删除的项目 3.code这一行导航栏 最后的一个. setting 4.下拉页面到最下面 Del ...
- IOS CopyPNGFile 异常问题解决
今天突然出现一个编译问题,搞了我好久,这里不多说了.直接整理出来,记录下来! 问题描述如下图: 出现:CopyPNGFile 异常错误,Command /Applications/Xcode.app/ ...
- 解决URL路径包含+等特殊符号，编码也无效的办法
<?xml version="1.0" encoding="UTF-8"?><configuration> <syste ...
- cocos2dx在ubuntu下配置声音引擎
声音引擎库和cocos2dx的库是分开的我们要使用的时候不得不重新修改一下makefile,首先我们要找到声音引擎库的位置,在cocos2dx的 根目录下有一个lib文件,看一下是否存在libcoco ...
- mssql表名列名对应语句
if exists (select * from tempdb..sysobjects where name like '#magic%') drop table #magic go select a ...
- python 字符串替换
字符串替换可以用内置的方法和正则表达式完成.1用字符串本身的replace方法: a = 'hello word'b = a.replace('word','python')print b 2用正则表 ...
- IOS的浅拷贝和深拷贝
什么是深拷贝和浅拷贝 浅拷贝:就是指针的复制,拷贝的指针跟原指针指向内存中的同一个位置的对象.至于对象的引用计数值是否+1,就是看拷贝的指针赋给给的变量是Strong类型的,还是week类型的. 如果 ...
- Apache2.4为什么启动报错Cannot load php5apache2_4.dll into server
最近学习php,按照书上的描述,下载好apache和php后,按照其中配置进行,结果遇到了上述问题.花费了近一个半小时的时间解决了上述问题.现把解决问题过程中看到的方法总结如下. 最先肯定是一定要注 ...
- [转]Visual Studio技巧之打造拥有自己标识的代码模板
可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...
- Java知多少（111）数据库之修改记录
修改数据表记录也有3种方案. 一.使用Statement对象 实现修改数据表记录的SQL语句的语法是: update表名 set 字段名1 = 字段值1,字段名2 = 字段值2,……where特 ...