Vertikal zentriert in einem Div mit VH

Question

Ich versuche derzeit, ein Bild in einem Div zu zentrieren, dessen Abmessungen mit vh festgelegt sind. Ich versuchte mit der display:table-cell; Methode, die das Bild zentrierte, aber begann mit dem vw der anderen Elemente zu verwirren. Ich habe mich gefragt, ob es eine andere einfachere Möglichkeit gibt, dieses Bild in einem div als vh vertikal zu zentrieren. Ich weiß, das könnte ein wenig verwirrend sein, also hoffentlich kann mein Code unten helfen!

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

Es scheint, dass vertical-align:middle gewisse Inkonsistenz mit vw Einheit hat. Versuchen Sie den Positionierungsansatz. Hier ist die Lösung für Sie.

CSS-Code:

.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; 
} 

Hier ist der Arbeits fiddle