float left div center when wrapped

Question

I can currently get divs to center that are floating left with the code below.

<fieldset>
<div class="form_wrapping_columns_container">
  Test1
</div>
<div class="form_wrapping_columns_container">
  Test2
</div>
<div class="form_wrapping_columns_container">
  Test3
</div>
<div class="form_wrapping_columns_container">
  Test4
</div>
<div class="form_wrapping_columns_container">
  Test5
</div>
</fieldset>

fieldset
{
text-align:center;
display:inline-block;
margin: 0 auto;
}
.form_wrapping_columns_container{
width:200px;
float: left;
text-align:left;
margin-left: 60px;
margin-right: 60px;
padding-left:0px;
}

But what I am trying to do is if the browser window shrinks I still want the divs to center even if they have to wrap. But it appears that the field set width will always expand to hold all of them floating side by side even if they have to stack, so centering doesn't work as the window shrinks.

To clarify a little more. the container divs need to stay a set width. and just allow as many to be displayed side by side based on browser width. If they need to stack on top of each other because the window is too small thats fine. But if they need to stack, I still want them centered. It centers if they can all fit side by side, but won't center once they stack.

I'm sure its something simple I'm missing, and any help would be appreciated. I did some searches on here, but never saw an answer that seemed to fix my issue.

Thanks

Answer 1

Is this what you're looking for? JSFiddle

Note that this is not supported very well on old browsers, but if you don't care about old browsers Flex works great.

Please let me know if you need anything slightly changed. Note that I changed fieldset to a div, since apparently flex doesn't want to work with fieldset. Is that okay?

HTML:

<div id="fieldset">
    <div class="form_wrapping_columns_container">
      Test1
    </div>
    <div class="form_wrapping_columns_container">
      Test2
    </div>
    <div class="form_wrapping_columns_container">
      Test3
    </div>
    <div class="form_wrapping_columns_container">
      Test4
    </div>
    <div class="form_wrapping_columns_container">
      Test5
    </div>
</div>

CSS:

#fieldset
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.form_wrapping_columns_container
{
    margin: 0 auto;
    height: 60px;
    width: 50px;
    -webkit-flex: 0 0 50px;
    flex: 0 0 50px;
    border: 1px solid black;
}