父元素高度为auto：子元素使用top：-50%没有效果的问题

最新推荐文章于 2024-02-02 16:46:35 发布

liuboman

最新推荐文章于 2024-02-02 16:46:35 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web 文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/liuboman/article/details/50962386

前端web 专栏收录该内容

26 篇文章

订阅专栏

本文探讨了CSS中当父元素高度设为auto时，子元素使用百分比定位(top: -50%)失效的原因，并通过实例对比展示了不同设置下的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当为父元素设定了height：auto的时候，子元素设置position：relative top：50%没有效果的问题

代码如下：

<!DOCTPYE html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <style type="text/css">
     html, body
      {
          width:100%;
          height:100%;
      }
      #one
      {
          position: absolute;
          top:50%;
          left:50%;
         <span style="color:#ff0000;"><strong> height:auto;</strong></span>
          width:auto;
      }
      .pa
      {
          position: relative;
          height:400px;
          width:200px;
          <strong><span style="color:#ff0000;">top:-50%;</span></strong>
          left:-50%;
          border:1px solid black;
          background-color:greenyellow ;

      }

    </style>
</head>

<body>
<div class="pr" id="one">

    <div class="pa pa1">#one的子元素pa1，相对#one绝对定位，#one是它的父元素，与.pa2为同级兄弟元素</div>

</div>

</body>
</html>

其实这段代码是想让 .pa 水平垂直居中的，可是并没有效果，top：-50%没有效果，如下图

正常情况下父元素设置height：auto应用获得子元素最大高度，在浏览器中也显示了父元素的模型高度是子元素高度400px，但是使用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的效果是一样的。

当我们把height高度设定为固定值的时候：比如height：400px，代码如下，这时候子元素使用top：-50%就有效果了

<!DOCTPYE html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <style type="text/css">
     html, body
      {
          width:100%;
          height:100%;
      }
      #one
      {
          position: absolute;
          top:50%;
          left:50%;
      <strong><span style="color:#cc0000;">  </span><span style="color:#ff0000;">  height:400px;</span></strong>
          width:auto;
      }
      .pa
      {
          position: relative;
          height:400px;
          width:200px;
      <strong>  <span style="color:#ff0000;">  top:-50%;</span></strong>
          left:-50%;
          border:1px solid black;
          background-color:greenyellow ;

      }

    </style>
</head>

<body>
<div class="pr" id="one">

    <div class="pa pa1">#one的子元素pa1，相对#one绝对定位，#one是它的父元素，与.pa2为同级兄弟元素</div>

</div>

</body>
</html>

结果如下图