HTML/CSS/Javascript/Center

HTML/CSS/Javascript/Center,javascript,html,css,Javascript,Html,Css,具备以下条件; 我正在显示5000x5000像素的图像。 这是一个平面图 您可以使用水平和垂直滚动条在图像上滚动 鼠标按下滚轮。 在不同的点我有灯光点,如果你按下按钮,弹出窗口会出现,让你打开或关闭灯光,甚至变暗。 给你们一个主意 OK现在我希望这个弹出物集中在屏幕的中间,而不是图像的中心。因为如果视图位于左上角,则弹出窗口将不可见。右下角为visa versa。 由于代码是由设计工作室生成的,所以我没有很多选择 答案很好 问候, Ger以下内容将在页面上以.popup div为中心,无论您滚

具备以下条件; 我正在显示5000x5000像素的图像。 这是一个平面图 您可以使用水平和垂直滚动条在图像上滚动 鼠标按下滚轮。 在不同的点我有灯光点,如果你按下按钮,弹出窗口会出现,让你打开或关闭灯光,甚至变暗。 给你们一个主意

OK现在我希望这个弹出物集中在屏幕的中间,而不是图像的中心。因为如果视图位于左上角,则弹出窗口将不可见。右下角为visa versa。 由于代码是由设计工作室生成的,所以我没有很多选择

答案很好

问候,


Ger

以下内容将在页面上以.popup div为中心,无论您滚动到何处或弹出窗口的父对象是什么

.popup {
  position: fixed;
  top: calc(50vh - (**INPUT POPUP HEIGHT**/2);
  left: calc(50vw - (**INPUT POPUP WIDTH**/2);
}
如果您不知道确切的高度或宽度,有一个不太干净的版本涉及到将弹出边距设置为自动,并将其父级显示为:flex。如果您在这方面遇到问题,请查看flexbox。

阅读并创建一个