How to display divs on each other, horizontally and centered?

I have a container, which children from 1 to 6 elements, it depends. Here are the styles of the container:

  display: flex;
  min-height: 40.25rem;
  justify-content: center;

Here is what I need:
enter image description here

When I’m setting position: relative; left: 60px * n; it moves the children as expected. But the container itself doesn’t center the items in the center. So visually the items occupy more space in the left side. How can I stack the items, keeping the common position centered?