无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 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. PowerDesigner与UML建模应用

    一.   PD简介 PowerDesigner 是一个集所有现代建模技术于一身的完整工具,它集成了强有力的业务建模技术.传统的数据库分析和实现,以及UML对象建模.通过了元数据的管理.冲突分析和真正的 ...

  2. POJ 1011 - Sticks DFS+剪枝

    POJ 1011 - Sticks 题意:    一把等长的木段被随机砍成 n 条小木条    已知他们各自的长度,问原来这些木段可能的最小长度是多少 分析:    1. 该长度必能被总长整除    ...

  3. Jquery对回复者添加匿名评论选项

    通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id=&q ...

  4. CSS的一些思考(一)

    迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个 ...

  5. javascript数组方法鉴赏一

    创建数组 如果你习惯了用 new 来实例化对象的形式,那么在js中一定会疑惑,可选的参数数量代表的意义截然不同. new Array(size);//传一个参数的时候分两种情况,size是正整数时代表 ...

  6. C语言多维数组的地址

    设有整型二维数组a[3][4]如下: 0   1   2   3 4   5   6   7 8   9  10  11  它的定义为:     int a[3][4]={{0,1,2,3},{4,5 ...

  7. zip格式压缩、解压缩(C#)

    压缩方法 #region 压缩 /// <summary> /// 压缩 /// </summary> /// <param name="bytes" ...

  8. [CSAPP]并发与并行

    学了这么久的计算机,并发与并行的概念理解的一直不够透彻.考研复习那会儿,以为自己懂了,然而直到看了CSAPP才算是真正明白了这俩个概念. 并发(concurrency) 流X和流Y并发运行是指,流X在 ...

  9. gridview列显示,截取其中前面的几个字显示出来,当鼠标放上去的时候显示全部——使用LinkButton的方法

    使用LinkButton的方法<asp:LinkButton ToolTip ='<%#Eval("FilePath") %>' runat="serv ...

  10. MySQL流程控制函数

    官方文档:Control Flow Functions Name Description CASE Case operator IF() If/else construct IFNULL() Null ...