How to center image vertically in div - html

Question

I have a div which has a height of 100vh so that it's always the height of the browser screen. Inside of this div I want to place an image and center it vertical to its parent.
The height is variable so I can't use fixed margins. My current Markup is as follows:
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;
}
Does anybody know how to center the image vertically according to the browser height?
Here is the 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

I use this css snippet:
.selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/

Answer 2

Centering things in CSS has been a long debated topic where people weigh all the factors and argue what the least convoluted way is.
Then in 2014, something called Flexbox came out and basically obsoleted all that.
When a container has display: flex, there's properties to align its children. And you can anchor it in the middle on either/both axis.
<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/
It's so ubiquitously convenient I think it continues to fly under the radar because people assume it can't be so straightforward.

Answer 3

maybe this stackoverflow question could help you
jsfiddle
code is
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 4

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>