center div in the middle of the screen

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.

---

将position属性更改为fixed而不是absolute 。

---

Change position:absolute; to position:fixed;

---

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

Change

position: absolute;

To

position: fixed;

---

W3C specifications for position: absolute and for position: fixed .

链接地址: http://www.djcxy.com/p/83840.html

上一篇: CSS在可滚动页面上从顶部20px显示一个弹出窗口

下一篇: 在屏幕中间的中心div