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
.
上一篇: CSS在可滚动页面上从顶部20px显示一个弹出窗口
下一篇: 在屏幕中间的中心div