Wrap a row of blocks in the middle instead of end (CSS/JS/jQ)

How can a row of inline-blocks be wrapped by a shrinking parent resulting in equal (or almost equal) rows?

So instead of wrapping like this:

wrap like this:

And if there's an uneven number of blocks, like this: