Unusual flexbox behavior

Question

I'm using flexbox to center the items in the middle of the div, I also use the flex wrap to go breaking the line as you insert the items, but when inserting some items the wrap line break throws the item down instead of keeping everyone in the center, is this common?

I hoped they would all be in the center of the div and not with that space between the first and second line, why does this occur? Can I get the expected result?

.container{
  width: 808px;
  height: 690px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  display: flex;
}

.productContainer {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
}
.photo{
  width: 160px;
  height: 160px;
  margin: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  background: blue;
}

<div class="container">
  <div class="productContainer">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>