JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div class="content">
  <div class="redbox flex-all-centered">
    some text
  </div>
  <div class="bluebox flex-vertical-centered">
    more text only centered vertically
  </div>
  <div class="green-button absolute-all-centered">
    <p>bit more</p>
  </div>
  <div class="darkblue absolute-vertical-centered">
    <p>finish with absolute positioning</p>
  </div>
</div>
  
</body>
</html>

CSS

.flex-all-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.flex-vertical-centered {
  display: flex;
  align-items: center;
  color: #fff;
}

.absolute-all-centered p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
}
.absolute-vertical-centered p {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin: 0;
  color: #fff;
}

.redbox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
background-color: red;
}
.bluebox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
background-color: blue;
}
.green-button {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
background-color: green;
}
.darkblue {
display: block;
height: 50vh !important;
min-height: 50vh !important;
position: relative;
background-color: navy;
}