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

Question

I am working on an responsive mobile website with a max width of 640px.

I have an picture of 640 x 1060 I want to use a "popup".

Since I already have an entire website with overlays etc the z-index needs to be 7 to overal everything.

I want padding around the sides and an auto heigh depending on the device's resolution. So for example either:

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

or

width: 95%

This while the height auto adjusts to keep aspect ratio. All this while keeping the image both horizontal and vertically centered. (In the middle of the screen)

The position needs to be fixed as I don't want the used to be able to scroll "past" the image, but rather, in their face and make them close it.

Answer 1

you can try:

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