JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<h1>Center of page</h1>

<div class="box" id="divImgAnimated">
  Center of Document
</div>

<button>Click</button>

CSS

.box {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  background: #FFCC00;
  position: absolute;
  top: 33px;
}

JavaScript

(function() {
  $('#divImgAnimated').hide();
  var box = $('#divImgAnimated');
  var h = $(window).height() / 2 - box.outerHeight() / 2;
  var w = $(window).width() / 2 - box.outerWidth() / 2;
  $('button').on('click', function() {
    $('#divImgAnimated').show();
    box.animate({
      'left': w,
      'top': h
    }, 500);

  });

})();