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

问题描述

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

我使用以下 CSS 将 div 居中在屏幕中间:

.PopupPanel{边框:纯 1px 黑色；位置:绝对；左:50%；顶部:50%；背景颜色:白色；z-索引:100；高度:400px；边距顶部:-200px；宽度:600px；左边距:-300px；}

只要页面没有向下滚动，这个 CSS 就可以正常工作.

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

我想知道如何在屏幕中间显示 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屋！