Question

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

请将鼠标悬停在蓝色球上以获取动画：

＆＃13;

<!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>

＆＃13;

但是中间的球在Firefox中扩展到了底部，我必须设置顶部或底部以使其恢复到正确的位置。无论如何都要让它保持在中间而不分配顶部和底部值，就像在Chrome中一样？

Answer 1

将块元素置于相对定位容器中间的一个很好的技巧是使用transform: translateY(-50%)和.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%); }。

需要IE9 +

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

{{1}}

JSFiddle演示：https://jsfiddle.net/oujab44t/1/

Answer 2

setuptools.find_packages()

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

2 个答案: