Выровнять по центру div с переменной шириной на 100% экране

Я получил этот 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>

И CSS

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

Таким образом, обертка имеет ширину 100%, а ширина и количество ячеек являются переменными, то есть ширина # center также является переменной.

Вопрос: Как сохранить # центрирование по горизонтали по центру?

Ответ 1

Да, вы можете сделать это с помощью display:inline-block.

Например:

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;
}

В этом примере http://jsfiddle.net/8a4NK/

Ответ 2

Пересмотр этого в 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/