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

Question

我正在开发一个最大宽度为640px的响应式移动网站。

我有640 x 1060的图片我想使用＆＃34; popup＆＃34;。

由于我已经拥有一个覆盖等整个网站，因此z-index需要7到几个。

我希望根据设备的分辨率在两侧填充和自动高度。 例如：

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

或

width: 95%

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

该位置需要fixed，因为我不希望习惯能够滚动过去＆＃34;过去＆＃34;图像，而是在他们的脸上，让他们关闭它。

Answer 1

你可以尝试：

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