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 ...
随机推荐
- ECShop在任何页面调用最新文章并变成随机文章
一.让最新文章变成随机文章 在根目录 打开index.php文件 查找代码 ' ORDER BY a.article_type DESC, a.add_time DESC LIMIT ' . $GLO ...
- 阿里云里面的Linux 系统挂载数据盘
转自:http://www.cnblogs.com/adjk/p/5112360.html 适用系统:非IO优化+SSD云盘Linux(Redhat , CentOS,Debian,Ubuntu)实例 ...
- 如何做好IT运营.
定义IT管理的重点在于业务策略与 IT 部门提供的服务之间的一致性.IT 管理可建立必要的管理机制来确保可预测的 IT 服务交付,从而确保业务流程和 IT 流程之间的联系.IT 管理传统上属于CIO. ...
- nginx+lua_nginx+GraphicsMagick生成实时缩略图
暂做笔记,带后续验证通过后,再补充 1.2.3 步. 一.安装 lua 首先确认是否安装 readline yum -y install readline-devel ncurses-devel 进入 ...
- Google首席软件工程师Joshua Bloch谈如何设计一款优秀的API【附PPT】
编者按]随着近来软件规模的日益庞大,API编程接口的设计变的越来越重要.良好的接口设计可以降低系统各部分之间的相互依赖,提高组成单元的内聚性,降低组成单元间的耦合度,从而提高系统的维护性和稳定性. J ...
- Redis PHP通用类
找到一个比较全的Redis PHP操作类库,分享给大家 <?php /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时,才会 ...
- MDX 占比同比环比
http://blog.csdn.net/hero_hegang/article/details/9072889
- 你不知道的javascript
一.对象 JavaScript简单类型有数字.字符串.布尔值.null.undefined,其他所有的值都是对象(数组.函数.正则表达式都是对象). 数字.字符串.布尔值虽然拥有方法(包装对象),但并 ...
- Nginx: could not build the server_names_hash 解决办法
# /etc/init.d/nginx reload * Reloading nginx configuration nginx [fail] # nginx -t nginx: [emerg] co ...
- 下载最新Android代码的方法
之前我是去Android官方网站下载最新Android代码,但是这种方法需要FQ,而且有时候FQ又不太方便,今天我发现一个不错的网站,是清华大学搞的,跟Android官方的代码基本保持同步,而且下载方 ...