JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div style="background:red;position:absolute;top:0;bottom:0;left:50%;width:1px"></div>    
    <ul>
        <li>item 1 is boring</li>
        <li>item 2 is a very long item indeed, oh yes it is  middle char should be in center of page</li>
        <li>item 3 is almost as boring as item 1</li>
        <li>but item4 is friggin' awesome!</li>
    </ul>
    
    <p style="margin-left:50%">Not correctly centered</p>
</body>

CSS

ul {
    float: left;
    position: relative;
    left: 50%;
}
li {
    float: left;
    position: relative;
    left: -50%;
    font: 12px Arial;
    clear: left;
}