CSS垂直圖像定位

我有一個顯示圖像的功能。它打開隱藏的div，包含帶黑色覆蓋的圖像和div。CSS垂直圖像定位

.black-overlay { 
 
    opacity: 0.8; 
 
    background: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 10; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
} 
 
.white-content { 
 
    z-index: 11; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-top: 5%; 
 
} 
 
.white-content .main-image { 
 
    z-index: 11; 
 
    border: 2px solid #ccc; 
 
    border-radius: 10px; 
 
    background: #FFF; 
 
    max-width: 90%; 
 
    max-height: 90%; 
 
    position: relative; 
 
}

<div class="black-overlay hide"></div> 
 
<div class="white-content hide"> 
 
    <img class="main-image" src="//dummyimage.com/200" /> 
 
</div>

平鋪圖像的中心，這是我想要的對齊。

問題是，垂直圖像總是堅持頂部，我不知道如何解決它。

有人可以幫助我解決這個問題（我可以添加額外的div如果需要的話）

來源

2015-06-23 A L

爲什麼不將兩個疊加層合併爲一個？ – Stickers

並使用rgba代替不透明 - [demo here]（http://jsfiddle.net/wcvyvg4v/）。 – Stickers

使用display：彎曲的定心：

.white-content{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.white-content .main-image{ 
    display: block; 
}

這將水平和垂直居中的圖像。記得爲舊版瀏覽器添加前綴。

來源

2015-06-23 21:27:34

現在它做垂直對齊，但它不適用於移動設備，它不保留圖片的分辨率 –

什麼是移動瀏覽器不起作用？「不保持分辨率」是什麼意思？你可以發佈截圖嗎？移動瀏覽器中的 –

仍然堅持到頂端。在桌面瀏覽器中，如果我有900x600的圖像並將瀏覽器窗口更改爲500x500，則圖像將通過變形佔用整個500x500 –

CSS垂直圖像定位

回答

相關問題