JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <div class="container">
    <div>
      <div id="logo"><h1>Site Title</h1></div>
      <p>Other site elements</p>
      <p>Really long element to go underneath the other element</p>
    </div>
  </div>

</div>

CSS

#header {
height: 170px;
width: 100%!important;
position: relative;
background: green;
}

.container {
left: 50%;
top: 50%;
position: absolute;
background: red;
transform: translate(-50%, -50%);
text-align: center;
}