JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "outermost-div">
    <div class = "inner-div">
        <div class = "centered-div">
            asdfadsfjadslfjasldjfasljdfa
        </div>
    </div>
</div>

CSS

.outermost-div{
    background-color: blue;
    overflow:hidden;    
}

.inner-div{
   float:left;
    left:50%;
    background-color: yellow;
    position: relative;
}

.centered-div{
    position: relative;
    float:left;
    background-color:red;
    left: -50% ;
    width: auto;
}