JSFiddle - React, Tailwind, and code Playground

HTML

<button id="toggleResize">
  Resize function: on
</button>
<div id="myDiv" class="v-centered">
</div>

CSS

html {
  height: 100%;
  padding-top: 8px;
}

body {
  height: 100%;
}

#myDiv {
  position: relative;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/37/Wikipedia-lolcat.jpg');
  height: 600px;
  width: 750px;
  display: inline-block;
  left: 200px;
}

.v-centered {
    top: 50%;
    transform: translateY(-50%);
}

#toggleResize {
  position: absolute;
  top: 8px;
}

JavaScript

var $myDiv = $('#myDiv'),
		$btn = $('#toggleResize'),
    paddingTop = parseInt($('html').css('padding-top')),
    doResizeCalc = true;

function onResize() {
  if ($myDiv.is('.v-centered')) {
    if ($myDiv.position().top < paddingTop) {
      $myDiv.removeClass('v-centered');
    }
  } else {
    if ($myDiv.height() < document.body.offsetHeight) {
      $myDiv.addClass('v-centered');
    }
  }
}

$('#toggleResize').on('click', function () {
	doResizeCalc = !doResizeCalc;
	if (doResizeCalc) {
  	$(window).on('resize', onResize);
    onResize();
    $btn.text('Resize function: on');
  } else {
  	$(window).off('resize', onResize);
    $myDiv.addClass('v-centered');
    $btn.text('Resize function: off');
  }
});