相对元素下的绝对元素会导致 Firefox 下的奇怪行为

此代码在Chrome上按预期运行：

请将鼠标悬停在蓝色球上以播放动画：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 100%;
      height: 200px;
      border: thin solid #6D6;
      overflow: hidden;
    }
    h2 {
      position: absolute;
      border-radius: 100%;
      background-color: blue;
      height:100px;
      width: 100px;
      transition:all 1s ease-out;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    
    h2:hover {
      height: 300px;
      width: 300px;
    }
  </style>
</head>
<body>
  <div class='container'>
    <h2></h2>
  </div>
</body>
</html>

但是在 Firefox 中，中间的球会膨胀到底部，我必须设置顶部或底部才能将其恢复到正确的位置。有没有办法让它保持在中间而不像在 Chrome 中那样分配顶部和底部值？

在相对定位的容器中间居中块元素的一个很好的技巧是使用 top: 50% 和 transform: translateY(-50%) 。

它需要IE9+

    .container {
      position: relative;
      width: 100%;
      height: 200px;
      border: thin solid #6D6;
      overflow: hidden;
    }
    h2 {
      position: relative;
      border-radius: 100%;
      background-color: blue;
      height: 300px;
      width: 200px;
      margin: auto;
      top: 50%;
      transform: translateY(-50%);
    }

  <div class='container'>
    <h2></h2>
  </div>

JSFiddle demo： https://jsfiddle.net/oujab44t/1/

<head>
  <style>
  .container {
    to;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  </style>
</head>
<body>
  <div class='container'>
    <h2></h2>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：