Center image vertically and horizontally in flexbox

Question

What I want to achieve:

Center an image horizontally and vertically in the right flexbox item as shown in this picture:

What's the best way to do it?

Here's my Codepen: https://codepen.io/AlexZeitler/pen/JayvNg

I got the image centered horizontally but not vertically using this .grid-right class:

.grid-right {
    width: 67%;
    height: 100vh;
    background-size: cover;
    text-align: center;
} 

Answer 1

.grid-right {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
  width: 67%;
  height: 100vh;
  background-size: cover;
  text-align: center;
}

revised codepen

Answer 2

div {
  /* for the demo */
  width: 100%;
  height: 300px;
  background-color: blue;
  
  /* makes the image gets centered */
  display: flex;
  justify-content: space-around; /* horizontal centering */
  align-items: center; /* vertical centering */
}

img {
  /* for the demo */
  height: 100px;
  background-color: white;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png">
</div>

Answer 3

You can use the following to center an image vertically and horizontally in flexbox:

.grid-right {
    width: 67%;
    height: 100vh;
    background-size: cover;
    text-align: center;
    display: flex;            /* new */
    align-items: center;      /* new */
    justify-content: center;  /* new */
}