JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="block">
        <div class="centered">
            asdasdasd
        </div>
    </div>
</div>

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
  height:200px;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
   background: #ccc;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}