Định tâm theo chiều dọc bên trong div với vh

Question

Tôi hiện đang cố gắng căn giữa hình ảnh bên trong div có kích thước được đặt bằng vh. Tôi đã thử sử dụng phương pháp display:table-cell; làm trung tâm hình ảnh nhưng bắt đầu rối tung với các phần tử khác. Tôi đã tự hỏi nếu có một cách đơn giản hơn để được thẳng đứng trung tâm hình ảnh này bên trong một div như vh. Tôi biết điều này có thể hơi khó hiểu vì vậy hy vọng mã của tôi xuống dưới đây có thể giúp bạn!

Html:

<div class="graphic" style="background-color:#ff837b"> 
    <img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" /> 
</div> 

CSS:

#induoIntro .graphic { 
    display:block; 
    height:100vh; 
} 

Answer 1

Dường như vertical-align:middle có một số mâu thuẫn với vw đơn vị. Thử phương pháp định vị. Đây là giải pháp cho bạn.

mã CSS:

.graphic { 
display:block; 
height:100vh; 
position: absolute; 
top:0; 
bottom:0; 
width: 100%; 
} 

.graphic img{ 
vertical-align: middle; 
width:100%; 
    display: inline-block; 
    height:50%; 
    position: absolute; 
    top: 0; 
    bottom:0%; 
    margin: auto; 
} 

Dưới đây là làm việc fiddle