How to float center but still keep the propities of left float - html

Question

So I want to float some div's center, orignally I was using float: left which gave me this look http://i.imgur.com/wfHacch.png after reading other answers I see that I can not do that, one of the suggestions made was to use margin: 0 auto; when I used this it made everything simply stack in a line down the center, as per this image http://i.imgur.com/xyixrdj.png
I am trying to force the floating div's to be stacked uniformly centered. Which would also adjust to the stack down the line in lower screensizes,
How best am I to do this?
So here is my CSS at the moment
.container {
overflow: hidden;
width: 100%;
height: 100%;
}
.item {
float: left;
max-width: 500px;
width: 100%;
padding: 10px;
height: 100%;
}
button {
width: 33%;
height: 100%;
padding: 20px;
background: orange;
border: 1;
border-radius: 10px;
border: 1px;
border-radius: 02px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
And my HTML
<div class="container orders">
<div class="item">
<button class="ready">
/*content*/
</button>
</div>
</div

Answer 1

You should use inline-block
div {
display: inline-block
}
By default divs are block elements.

Answer 2

You can use flexbox: https://jsfiddle.net/BradChelly/m9d3jepz/
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
width: 30%;
height: 100px;
margin-bottom: 20px;
border:1px solid red;
}
#media only screen and (max-width: 500px) {
.item {
width: 45%;
}
}
#media only screen and (max-width: 300px) {
.item {
width: 100%;
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 3

I don't know what your code is but If I were you I would try wrap those div's in another div with display: inline-block and clearfix. And then give parent text-align: center. End code should look something like that:
.parent{
text-align: center;
}
.parent .container{
display: inline-block;
width: 340px;
zoom: 1;
}
.parent .container:after{
content: "";
display: table;
clear: both;
}
.parent .container:before{
content: "";
display: table;
}
.parent .container .element{
display: block;
float: left;
width: 100px;
bordeR: 1px solid #000000;
height: 50px;
margin: 5px
}
<div class="parent">
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>

Answer 4

if you want center a div so you have to remove float left you can add text-align center i parent div and add display inline-block in child div like this
.parent{
width:100%;
float:left;
text-align:center;
}
.child{
width:100px;
background:#f00;
display:inline-block;
}
<div class="parent">
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
</div>