即使将页面向上或向下滚动，也可以在屏幕中间居中放置"div"? [英] Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

问题描述

页面上有一个按钮，单击该按钮时，屏幕中间会显示一个div(弹出式样式).

我正在使用以下CSS将div置于屏幕中央:

.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;
}

只要页面不向下滚动，此CSS即可正常工作.

但是，如果将按钮放在页面底部，则单击该按钮时，div会显示在顶部，并且用户必须向上滚动才能查看div的内容. /p>

我想知道即使在页面滚动时如何在屏幕中间显示div.

解决方案

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

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.

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