JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div id="box">
   stay center
</div>
    
<div class="main">
  asdf
</div>

</div>

CSS

.wrap{
    margin:0 auto;
    border:1px solid blue;
    width:600px;
    overflow:auto;
    left:50px;
}
#box{
   border:1px solid green;
   width:100px;    
    float:left;
}

.main{
    border:1px solid red;
    height:1500px;
    float:right;
    width:400px;
}

JavaScript

(function($){
 $.fn.extend({
   center: function () {
     return this.each(function() {
      var top = ($(window).height() - $(this).outerHeight()) / 2;
      $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px'});
            });
        }
    }); 
})(jQuery);


$('#box').center();