居中圖像在水平和垂直方向上都充當“彈出窗口”

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%)