How to align div's to center when size of adjacent div's overflows screen width

My question must be little bit confusing and will have many related questions. But I think my case is different.

Please run the code in full screen and reduce the size of the screen to around such that there will be

Two boxes per row

One box per row

In both cases there will be lot of empty space to right of the adjacent box, what I want is to align the box to the center and make look both right and left equal when such a case occurs. It should work for both the cases (Two boxes per row & One box per row)