无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效

后来查阅w3c看到这样一句话:

<percentage> 百分比

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
如果父元素的高度没有明确指定,top 的值跟设定为auto的效果是一样的 。

  <div style="position: absolute; left: 50%;top:50%;border:1px solid green">
<div style="position: relative; left: -50%; top:-50%;border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>

但是当指定特定值的时候就会有效果, height:36px;

 <div style="position: absolute; left: 50%;top:50%;height:36px;border:1px solid green">
<div style="position: relative; left: -50%; top:-50%;border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>

  

  

父元素高度为auto,子元素使用top:-50%没有效果的问题的更多相关文章

  1. CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  2. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  3. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  4. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  5. 【父元素parent】【子元素children】【同胞siblings】【过滤】

    1.父元素 $("span").parent()           //定位到span的父元素 $("span").parents()          // ...

  6. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  7. 父元素相对定位后,子元素在ie下被覆盖的问题!

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  8. 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

    但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...

  9. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

随机推荐

  1. CSS 盒子模型(转)

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  2. BZOJ 1001 狼抓兔子 (网络流最小割/平面图的对偶图的最短路)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1001 算法讨论: 1.可以用最大流做,最大流等于最小割. 2.可以把这个图转化其对偶图,然 ...

  3. C++智能指针初学小结

    本篇随笔仅作为个人学习<C++ Primer>智能指针一节后的部分小结,抄书严重,伴随个人理解.主要介绍shared_ptr.make_shared.weak_ptr的用法和联系. C++ ...

  4. C++中引用和指针详解

    先来分析指针这个东东: 从概念上讲,指针本质上就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 上面的图表示了程序运行时变量的值 ...

  5. js工厂模式

    设计工厂模式是为了创建对象.通常在类或者类的静态方法中实现,具有两个目标.其中一个是:当创建相似对象时执行重复操作: 另外一个目标是:编译时不知道具体类型(类)的情况下,为工厂客户提供一种创建对象的接 ...

  6. $.unique() 对象组成的数组去掉重复对象

    发现一件事,一个完全由对象组成的数组,用$.unique()方法去掉重复的时候不管用 var arr = [{text:'第一个',value:'1'},{text:'第二个',value:'2'}, ...

  7. 史上最全前端面试题(含答案) - Web开发面试题

    HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...

  8. php 远程下载图片到本地

    大家好,从今天开始,小弟开始写写博客,把自己在工作中碰到的问题的解决方法纪录下来,方便以后查找,也给予别人方便,小弟不才,第一次写博客,有什么不足之处请指出,谢谢! 今天纪录的是怎么通过PHP远程把图 ...

  9. php 生成和下载xml文件

    方法一 $doc = new DOMDocument('1.0', 'utf-8'); $doc->formatOutput = true; $rootEle = $doc->create ...

  10. centos mysql 数据存储目录安装位置

    rpm -ql mysql查看安装位置 MYSQL默认的数据文件存储目录为/var/lib/mysql.假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 c ...