在屏幕中间的中心div - 即使页面向上/向下滚动 [英] center div in the middle of the screen - even when page is scrolled up/down

问题描述

我在我的页面中有一个按钮，当点击时在屏幕中间显示一个div（弹出式样）。

我使用以下CSS

  .PopupPanel 
 {
 border：solid 1px black; 
 position：absolute; 
 left：50％; 
 top：50％; 
 background-color：white; 
 z-index：100; 
 
 height：400px; 
 margin-top：-200px; 
 
 width：600px; 
 margin-left：-300px; 
} 
  

只要页面没有向下滚动， p>

但是如果我把按钮放在我的页面底部并点击它，div显示在顶部（用户必须向上滚动才能查看div的内容）。

我想知道如何在屏幕中间显示div，无论用户是否向上/向下滚动。

感谢您的帮助：）

解决方案

将position属性更改为fixed 。

I have in my page a button which when clicked display a div(popup style) in the middle of my screen.

I am using the following css to center the div in the middle of the screen.

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

It works fine as long as the page is not scrolled down..

But if i place the button at the bottom of my page and clicks on it, the div is displayed at the top (user has to scroll up to view the div's contents).

I would like to know how to display the div in the middle of the screen, whether user has scrolled up/down.

Thanks a lot for your help :)

解决方案

Change the position attribute to "fixed" instead of "absolute".

这篇关于在屏幕中间的中心div - 即使页面向上/向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！