JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="block1" class="center-this"></div>
</div>

<div id="wrapper">
    <div id="block2" class="center-this"></div>
</div>

<div id="wrapper">
    <div id="block3" class="center-this"></div>
</div>

CSS

#wrapper {width: 500px; height: 50px; padding: 20px; position: relative; background: #efefef; margin-bottom: 10px;}

.center-this {position: absolute; left: 50%; -webkit-transform: translate(-50%, 0);}

#block1 {width: 200px; height: 50px; background: #000;}
#block2 {width: 50px; height: 50px; background: #000;}
#block3 {width: 381px; height: 50px; background: #000;}