绝对居中的CSS div有一个警告

时间:2015-07-08 14:56:48

标签: html css

我使用以下语法在我的页面上设置了一个弹出窗口:

position:absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-38%); //well, slightly lower than center...

enter image description here 这非常有效 - 除非弹出窗口的高度大于当前窗口的高度。它不会经常发生,但是当它发生时,我可以向下滚动以查看其他内容,但是我无法向上滚动窗口以查看上面的内容,就像在这个示例中一样:

enter image description here

我尝试添加padding-top:20px!important但这没有做任何事情。我想说vertically center, but if the height of the div would cause the top of it to not be displayed, just affix the div to the top of the window instead

我会在此添加哪些代码来实现这一目标?

修改

这与SO上的另一篇文章类似:

How to center an element vertically in css in a scrollable container

我不希望将物品放在带有弹性容器的中心。虽然这是一个很棒的帖子,并且flex逻辑工作以使项目居中,但我希望无法居中,除非div的高度太大 - 然后我希望它将自己固定在窗口的顶部。

如果我可以在这个高度为1px的popup div之上放置某种div并强制弹出div永远不会高于它,那也没关系。我有一个非常具体的理由说明为什么我希望div在窗口顶部很长时间 - 我不希望它在100%的时间内居中(这是另一篇文章所做的。 )

0 个答案:

没有答案