JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

CSS

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
left: 0px;
right: 0px;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
text-align: center;
top: 0;
bottom: 0;
}