JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span>
    too much text for one line
  </span>
</div>

CSS

div {
  width:200px;
  height:200px;
  line-height:200px;
  text-align:center;
}

span{
  line-height:normal;
  display:inline-block;
  width: 50%;
  vertical-align:middle;
}

body * { border: solid 1px black; }