html - Centering boxes in CSS -

i trying center 3 boxes in middle of container. however, cannot working.

what doing wrong?

html

<div id="boxes">     <div class="box">box1</div>     <div class="box">box2</div>     <div class="box">box3</div> </div> 

css

#boxes {     width: 800px;     background-color: yellow;      float: left; }  #boxes .box {     width: 100px;     height: 100px;      margin: 10px;     float: left;      background-color: blue; } 

jsfiddle problem: http://jsfiddle.net/3cuf5/

if need crossbrowser solution, use display: inline-block inner boxes , align text-align: center on parent.

example fiddle: http://jsfiddle.net/rhbez/1/

css

#boxes {     width: 800px;     background-color: yellow;     float: left;     text-align: center; }  #boxes .box {     display: inline-block;      width: 100px;     height: 100px;     margin: 10px;     background-color: blue; } 

---

a second approach using display: flex, work on recent chrome , firefox:

example: http://jsfiddle.net/2mxet/1/

css

#boxes {     width: 800px;     background-color: yellow;     float: left;     display: flex;     justify-content:center; }  #boxes .box {     width: 100px;     height: 100px;     margin: 10px;     background-color: blue; }