JSFiddle - React, Tailwind, and code Playground

HTML

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</div>

<p>note that the middle box will only be truly centered if adjacent boxes are equal width.</p>

CSS

#center {
    text-align: center;
    margin-bottom: 5px;
}

#center > span {
    background-color: aqua;
    padding: 2px;
}

#container {
    display: flex;
    justify-content: space-between;
    background-color: lightyellow;
}

.box {
    height: 50px;
    width: 75px;
    border: 1px dashed red;
    background-color: springgreen;

}

.box1 { width: 100px; }
.box3 { width: 200px; }