JSFiddle - React, Tailwind, and code Playground

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%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}