我有一个高度已知的容器(高度有时比屏幕长)。
该容器具有垂直和水平居中的元素(通过
我希望始终将此元素在可见部分的块中垂直居中于容器屏幕上。
我尝试过:
我尝试设置负值,但没用
这里是演示:
有没有任何办法可以在容器的可见部分中保持完美居中,同时“始终在屏幕上”,包括顶部和底部?
这是我的应用程序的录屏:https://www.youtube.com/watch?v=CwYaBgolNHU “rawr”将成为其后面图像的控件。
该容器具有垂直和水平居中的元素(通过
flex
)。我希望始终将此元素在可见部分的块中垂直居中于容器屏幕上。
我尝试过:
position:sticky; top:50%
- 但这只能使其保持在容器底部的中心。position:sticky; bottom:50%
- 但这只能使其保持在顶部一半的中心position:sticky; top: 50%; bottom:50%;
- 看起来top
覆盖了bottom
,所以这就像我的第一次尝试,只有top:50%
.container {
height: 1200px;
background-color: rgba(0, 0, 0, .7);
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.center-piece {
background-color: green;
position: sticky;
top: 50%;
}
.center-piece2 {
background-color: steelblue;
position: sticky;
bottom: 50%;
}
<div class="container">
<div class="center-piece">
#1
</div>
<div class="center-piece2">
#2
</div>
</div>
这是我的应用程序的录屏:https://www.youtube.com/watch?v=CwYaBgolNHU “rawr”将成为其后面图像的控件。
position: sticky
只在 Firefox 中有效(并且需要使用前缀在 Safari 中生效):http://caniuse.com/#search=sticky - Michael Benjamin