JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image-container">
    <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
  </div>
  <div class="another-flex-child">
    Random content here
  </div>
</div>

<div class="spacer"></div>

<div class="container">
  <div class="image-container">
    <div>Properly centered content</div>
  </div>
  <div class="another-flex-child">
    Random content here
  </div>
</div>

SCSS

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
  
  .image-container {
    flex: 1;
    align-self: center;
    .img {
      height: 100%;
    }
  }
  
  .another-flex-child {
    flex: none;
    background-color: red;
  }
}

.spacer {
  height: 20px;
}