JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="outer">
        <div id="inner">
            -- center --
        </div>
    </div>
</div>

CSS

#wrapper {  /* to hide the overflowing outer div -> prevent horizonal scrollbars */
    overflow:hidden;
}
#outer { /* middle of wrapper */
    float:left;
    position:relative;
    left:50%;
}

#inner {
    float:left;
    position:relative;
    left:-50%;
    border:1px solid #f00;
}