"Center left" align with css - css

Question

Will be hard to explain what I want, so I will show an animated gif of the result that I want (made in photoshop) and my code in jsFiddle of what's happening.
As you can see, when the blue box size is not enough to fit all items in one row, the 4º item is moved to the second row (as expected), but instead of being aligned in center, he is left aligned.
My CSS code
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: center;
padding: 10px;
}
.outer-box a
{
display: inline-block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
}
.outer-box a:hover
{
background: #990000;
}
.outer-box a div
{
background: #99ccff;
width: 100%;
height: 100%;
}
My HTML
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
My Result
My Expected Result
I've tried to play with float divs (one div inside outer-box and the link elements using float left) with no success.
There is a way to accomplish this without javascript?
Here is my code in jsFiddle.
PS. English is not my native language '-'.

Answer 1

with flex or inline block, you can use a pseudo of 1px height and the width of 2 boxes + their margins .
It will be like a fith box, filling entirely the second line and drop as a third line:
.outer-box {
background: #00cc99;
width: 100%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
font-size: 0;
padding: 10px;
}
.outer-box:after {
content: '';
max-height: 1px;
width: 320px
}
.outer-box a {
display: block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
margin: 5px 10px;
}
.outer-box a:hover {
background: #990000;
}
.outer-box a div {
background: #99ccff;
height: 100%;
}
<h1> USE full page mode then resize window broser </h1>
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
Inline-block version to play with

Answer 2

Firstly, I love the way you presented your problem. Nice images :-)
I don't think you can do what you want without an extra element. Adding an inline-block element that re-adjusts the alignment will do what you want.
.inner-box {
text-align: left;
display: inline-block;
}
See https://jsfiddle.net/qgcz0ax4/

Answer 3

Each of those divs act as text due to the <a> tags. Just set text-align to left for .outer-box - if you want each of the divs to have center aligned text, create a class and give that class to all 4 child divs
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: left;
padding: 10px;
}