JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="element">This is a text block that has no defined width, absolutely centered with transform. it's not immediately visible why the text itself is not reaching to either end of the .container parent element. However, the width of this interior div is only 50%
    of the parent element due to how this centering technique works.</div>
</div>

<div class="container">
  <div class="element neg-margin">If you wish to have the text inside the child not get squished inside the parent like in the first example. Add negative margin to expand the child element back to 100% of the parent.The Best example where this may become an issue is shown in the next
    boxes.</div>
</div>

<div class="container">
  <div class="element">Title of X Length here That is Squished</div>
</div>

<div class="container">
  <div class="element neg-margin">Title of X Length here That not Squished</div>
</div>

CSS

.container {
  display: inline-block;
  position: relative;
  height: 400px;
  width: 400px;
  background-color: #999;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.neg-margin {
  margin-right: -50%;
  margin-bottom: -50%;
}