[FIXED] How to center image vertically in div

Issue

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>

Solution

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/

Answered By - Emaro

Answer Checked By - Robin (PHPFixing Admin)