JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexbox-vertical-middle">
  <div>
    Service Description
  </div>
</div>
<div class="table-vertical-middle">
  <div class="table-cell">
    Service Description
  </div>
</div>

CSS

.flexbox-vertical-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-vertical-middle {
  display: table;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}