居中图像在水平和垂直方向上都充当“弹出窗口”

Question

我正在使用最大宽度为640px的自适应移动网站。

我有一张640 x 1060的图片，我想使用“弹出窗口”。

由于我已经有一个带有覆盖层等的完整网站，因此z-index必须为7才能覆盖所有内容。

我想根据设备的分辨率在两侧进行填充并自动调整高度。 因此，例如：

Padding-left: 10px 
Padding-right-10px

要么

width: 95%

高度自动调整以保持纵横比的同时。 所有这些，同时保持图像水平和垂直居中。 （在屏幕中间）

该位置需要fixed因为我不希望以前的用户能够滚动“粘贴”图像，而是要在他们的脸上使其闭合。

Answer 1

你可以试试：

 position:fixed;
 top:50%;
 left:50%;
 transform: translate (-50%,-50%)