How to center a row of floating-width divs?

Question

css

Hello. Help solve the problem.
There are divs with a fixed width of 630 pixels. It is supposed to display either 1 element by ~600 pixels, or two by ~300 or 3 by ~200. The problem is that the exact dimensions are not known in advance, and jscript is not allowed.
HTML snippet for two elements:

<div class="ban">
    <div class="pic">
        <img alt="" title="" src="#" width="300" height="120" border="0">
    </div>
    <div class="pic">
        <img alt="" title="" src="#" width="300" height="120" border="0">
    </div>
</div>

Adding other style options to pic is not suitable for the output (blocks with the pic class can be output in 1 2 and 3 instances according to the algorithm).
Elements inside the ban div must be spaced with the same padding between themselves and with zero at the edges

Answer 1

I slightly customized the variant from timtimIT
And it all worked.

Answer 2

How about flex: codepen.io/Enclave88/pen/PPeOyK

Answer 3

Can it be like this