Ich habe die folgenden Anforderungen.

Die grüne Breite des übergeordneten Elements variiert je nach Gerätebreite. Ich brauche alle Felder, um in der Mitte des übergeordneten Elements zu sein.

Ich habe die folgenden Dinge bereits ausprobiert, aber es hat mir nicht geholfen.

Test 1
Parent {text-align:center} box {display:inline-block}.

Dies führte zu folgender Ausgabe

Trial 2
Parent {text-align:center} box{float:left}.

Dies führte zu folgender Ausgabe

Trial 3
Parent {display:flex} box -> justify-around & justify-between hat auch nicht funktioniert.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Jede Hilfe hierzu wird gebeten.