center boxes horizontally inside container using CSS

Question

I have some html:

    .box {
      background-color: red;
      margin: 10px;
      width: 200px;
      height: 200px;
    }

    .container {
      background-color: black;
      padding: 10px;
      width: 100%;
    }

    .row {  
      background-color: blue;
      display: flex;
      flex-wrap: wrap;
    }

    .row > * {
      flex: 0 0 auto;
    }

<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div>
    </div>

What I would like to do, is center the "row" inside the container. And I would like the "row" to wrap around the boxes and be no wider than the margins on the side of the boxes (10px * 2). So, in theory, it should look like this image:

The black, is the container, the blue is the row and the red is the boxes. Does anyone know how it can be done?

To add a challenge, if the container is expanded, the boxes will adapt and move, keeping their size and padding (but the row should be central). Similarly, if the container is shrunk to smaller than the row, I want the row to shrink too and still wrap the boxes.

I hope that all makes sense.