JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rightDiv">
  <table width="80%">
    <tr><td>content</td></tr>
  </table>
</div>
<button id='centerme'>centerme!</button>

CSS

.rightDiv{
    width: 300px;
    height: 380px;
    overflow: hidden;
}

.rightDiv table{
    margin: auto; /*For centering horizontally*/
}

JavaScript

$('#centerme').click(function(){
    var testHeight = $('.rightDiv').innerHeight();
    var tableHeight = $('.rightDiv table').outerHeight();
    
    var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
    $('table').css('margin-top', tableMarginTop)    
    
})