JSFiddle - React, Tailwind, and code Playground

HTML

<p class="line-height">
This text was centered using line height
</p>
<br>
<div class="position">
  <p>
  This text  was centered using position absolute  
  </p>
</div>
<br>
<div class="padding-relative-box">
  <p>
  This text  was centered using padding
  </p>
</div>
<br>
<div class="padding-fixed-box">
  <p>
  This text  was centered using padding
  </p>
</div>
<br>
<div class="margin-relative-box">
  <p>
  This text  was centered using margin
  </p>
</div>
<br>
<div class="margin-fixed-box">
  <p>
  This text  was centered using margin
  </p>
</div>
<br>
<table class="vertical-align">
  <tr>
    <td>
      This text  was centered using vertical-align
    </td>
  </tr>
</table>

<br>
<div class="flex">
  <p>
  This text  was centered using felxbox
  </p>
</div>

CSS

p {
  margin: 0;
  text-align: center;
  font-family: Arial;
}

.line-height {
  border: red 1px solid;
  line-height: 100px;
  height: 100px;
}

.position {
  border: red 1px solid;
  height: 100px;
  position: relative;
}

.position p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.padding-relative-box {
  border: red 1px solid;
  padding: 30px 0;
}

.padding-fixed-box {
  border: red 1px solid;
  padding: 30px 0;
}

.padding-fixed-box p {
  height: 40px;
  line-height: 40px;
}

.margin-relative-box {
  border: red 1px solid;
}

.margin-relative-box p {
  margin: 30px 0;
}

.margin-fixed-box {
  border: red 1px solid;
  height: 100px;
}

.margin-fixed-box p {
  margin: 30px 0;
  height: 40px;
  line-height: 40px;
}

.vertical-align {
  text-align: center;
  border: red 1px solid;
  height: 100px;
  width: 100%;
  vertical-align: middle;
 }

.flex {
  border: red 1px solid;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
}