JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="element">
    <span>Some string</span>
  </div>
</div>

CSS

.wrap {
  outline: 1px solid black;
  height: 300px;
  width: 500px;
  padding: 15px;
}
.element {
   outline: 1px solid green;
   width: 80%;
   height: 60%;
   padding: 15px;
}
.element:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.element span {
  outline: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}