JSFiddle - React, Tailwind, and code Playground

HTML

<!--Method #1-->
<div class="wrapper">
   <div>Hi</div>
</div>

<!--Method #2-->
<div class="main2">
    <div class="inner2"> This </div>
</div>

CSS

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
  background-color: #00FF00;
  height: 100px;
}


.main2 {
    display: table;
    
    height: 100px;
}

.inner2 {
    display: table-cell;
    vertical-align: middle;
    background-color: #FF0000;
}