此代码按照预期在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>
&#13;
但是中间的球在Firefox中扩展到了底部,我必须设置顶部或底部以使其恢复到正确的位置。无论如何都要让它保持在中间而不分配顶部和底部值,就像在Chrome中一样?
答案 0 :(得分:0)
将块元素置于相对定位容器中间的一个很好的技巧是使用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/
答案 1 :(得分:-4)
setuptools.find_packages()