Wie Bild vertikal in div

Question

zentrieren Ich habe ein div, das eine Höhe von 100vh hat, so dass es immer die Höhe des Browser-Bildschirms ist. Innerhalb dieses div möchte ich ein Bild platzieren und es vertikal zu seinem Elternteil zentrieren.

Die Höhe ist variabel, daher kann ich keine festen Ränder verwenden. Meine aktuelle Markup ist wie folgt:

HTML

<div class="textportfolio"> 

     <h1>This is a title</h1> 

     <p class="textbio-small"> 
     The Roosevelt dime is the current ten-cent piece of the United States. 
     </p> 

     <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png"> 

    </div> 

CSS:

.textportfolio { 
    font-family: "Lora", serif; 
    margin: 5%; 
    background: #e9cca3; 
    height: 100vh; 
} 

img.portfolio-slides-img { 
    max-width: 40%; 
    max-height: 40%; 
    margin: 0 auto; 
    display: block; 
    } 

Weiß jemand, wie das Bild in die Mitte vertikal nach Browser Höhe? Hier

ist der Code-Snippet

.textportfolio { 
 
    font-family: "Lora", serif; 
 
    margin: 5%; 
 
    background: #e9cca3; 
 
    height: 100vh 
 
} 
 

 
img.portfolio-slides-img { 
 
    margin-top: 15%; 
 
    max-width: 40%; 
 
    max-height: 40%; 
 
    margin: 0 auto; 
 
    display: block; 
 
    }

<div class="textportfolio"> 
 
    <h1>This is a title</h1> 
 
    
 
    <p class="textbio-small"> 
 
    The Roosevelt dime is the current ten-cent piece of the United States. 
 
    </p> 
 
    
 
    <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png"> 
 
    
 
    </div>

Answer 1

Ich benutze diesen CSS-Schnipsel:

.selector { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

Ihre Probe angewandt: https://jsfiddle.net/nhdh8ycr/4/

Answer 2

vielleicht diese Stackoverflow Frage konnte hilf y ou jsfiddle

Code ist HTML

<div class=frame> 
<img src="http://jsfiddle.net/img/logo.png" height=3 /> 
</div> 

CSS

.frame { 
height: 25px;  /* equals max image height */ 
line-height: 25px; 
width: 160px; 
border: 1px solid red; 

text-align: center; margin: 1em 0; 
} 
img { 
background: #3A6F9A; 
vertical-align: middle; 
max-height: 25px; 
max-width: 160px; 
} 

Answer 3

Try this:

.textportfolio { 
 
    font-family: "Lora", serif; 
 
    margin: 5%; 
 
    background: #e9cca3; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
img.portfolio-slides-img { 
 
    max-width: 40%; 
 
    max-height: 40%; 
 
    margin: 0 auto; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    top: 35% 
 
}

<div class="textportfolio"> 
 
    <h1>This is a title</h1> 
 

 
    <p class="textbio-small"> 
 
    The Roosevelt dime is the current ten-cent piece of the United States. 
 
    </p> 
 

 
    <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png"> 
 

 
</div>

Answer 4

Zentrieren Dinge in CSS hat eine lange diskutiertes Thema, wo Menschen alle Faktoren abwägen und argumentieren, was die am wenigsten gewundenen Weg ist.

Dann im Jahr 2014 kam etwas namens Flexbox heraus und im Grunde veraltet all das.

Wenn ein Container display: flex hat, gibt es Eigenschaften, um seine untergeordneten Elemente auszurichten. Und Sie können es in der Mitte auf beiden Achsen verankern.

<div id="container"> 
<img src="https://i.imgur.com/i9xpVnQ.jpg" /> 
</div> 

html, body { 
    height: 100%; /* required to make body occupy the full viewport by default */ 
} 

#container { 
    height: 100%; 
    display: flex; 
    align-items: center; /* horizontal */ 
    justify-content: center; /* vertical */ 
} 

img { 
    height: 200px; 
} 

https://jsfiddle.net/5goboeey/1/

Es ist so ubiquitär bequem Ich denke, es geht weiter, unter dem Radar fliegen, weil die Menschen es annehmen kann nicht so einfach sein.