JSFiddle - React, Tailwind, and code Playground

HTML

<div id="reference">
   <div id="container">
      <div class="box a">1</div>
      <div class="box b">2</div>
      <div class="box c">3</div>
      <div class="box a">4</div>
      <div class="box b">5</div>
      <div class="box c">6</div>
      <div class="box a">7</div>
      <div class="box b">8</div>
      <div class="box c">9</div>
      <span class="clr"></span>
   </div>
</div>


















<div id="sopt">
   <a target="_top" href="http://pt.stackoverflow.com/a/16897/70">Voltar para o SOpt</a>
</div>

CSS

#reference, #container, .box {
   padding: 0;
   margin: 0;
}

#reference {
   position:relative;
   background-color: #ffc;
       align-content: flex-start;
        flex-wrap: wrap;
    width:100%
}
#container {
   position: relative;
   background-color: #ccc;
}

.box {
   float: left;
   width:140px;
   min-height:30px;
}

.clr {
   display:block;
   clear:both;
}

/* os estilos a seguir tem finalidade meramente estética para o fiddle */

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

body, html {padding: 0; margin: 0; height:100%; width: 100%;
    font-family: sans-serif}
#sopt {clear:both;padding:30px 0 0 0;text-align:center}

JavaScript

b2AdjustPadding(); // acrescentar no  onload

window.onresize = function() {
  //b2AdjustPadding();
}

function b2AdjustPadding() {
   var boxSize = 100; // Ponha o mesmo width que estiver no CSS
   var reference = document.getElementById('reference');
   var remaining = reference.offsetWidth % boxSize;
   var padLeft = Math.round(  remaining / 2 );
   var padRight = remaining - padLeft;
   
   reference.style.paddingLeft = padLeft+"px";
   reference.style.paddingRight= padRight+"px";
}