Center-align a variable-width div in 100% screen

Question

I got this HTML

<div id="wrapper">
<div id="center">

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>

</div>
</div>

And CSS

#wrapper{width:100%}
.cell{float:left}

So wrapper is 100% width and the width and number of cells are variable, meaning width of #center is variable too.

Question: How do I keep #center horizontally center-aligned?

Answer 1

Yes you can do it with display:inline-block.

For example:

css:

 #wrapper{
    width:100%;
    text-align:center;
}
#center{
    display:inline-block;
    *display:inline;/* IE*/
    *zoom:1;/* IE*/
    background:yellow;
    overflow:hidden;
    text-align:left;
}
.cell{
    float:left;
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Check this example http://jsfiddle.net/8a4NK/

Answer 2

Revisiting this in 2017

#wrapper{
    width:100%;
    display: flex;
    justify-content: space-around;
}
#center{
    background:yellow;
    display: flex;

}
.cell{
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Fidle: http://jsfiddle.net/027m8mnv/