div 位于屏幕正中间_即使页面向上或向下滚动，在屏幕中间居中放置“ div”也能居中？...

I have in my page a button which when clicked displays 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;

}

This CSS works fine as long as the page is not scrolled down.

But, if I place the button at the bottom of my page, when it is clicked, the div is displayed at the top, and the user has to scroll up to view the contents of the div.

I would like to know how to display the div in the middle of the screen, even when the page has been scrolled.

解决方案

Change the position attribute to fixed instead of absolute.