JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <div class="grandparent">
    <span class="title">Hello World</span>
    <div class="parent">
      <div class="child">
        <i class="fa fa-star fa-5x"></i>
        <span>Good For Yoouuu...</span>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  position: relative;
  height: 350px;
  /*This is unknown, set here for example purposes */
}

.grandparent {
  height: 100%;
  border: 1px solid black;
}

.parent {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child span {
  display: block;
}

.title {
  line-height: 24px;
}