JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<html><body>
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
</body>
</html>

CSS

html, body, div {
    height: 100%;
}

#parent
{ position:relative; border: 1px solid black; }

#child
{ position: absolute; top: 50%;  margin-top: -0.5em; overflow: hidden;  white-space: nowrap; width: 100%; text-overflow: ellipsis; }