JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='parent'>
  <div class='centered'>
    centered
  </div>
  <div class='centered-helper'>

  </div>
</div>

CSS

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  text-align: center;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  background-color: tomato;
}
.centered-helper {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}