Центрирование дисплея: таблица div

Question

У меня есть полная обертка ширины. Внутри него есть еще один div, установленный как display: table.

Я установил обертку как text-align: center, но таблица div не центрируется. Почему это? Что мне здесь не хватает, чтобы центрировать display: table div горизонтально внутри обертки?

See JsFiddle here

<div class="wrapper"> 
    <div class="tb"> 
     <div class="tb-cell">1</div> 
     <div class="tb-cell">2</div> 
     <div class="tb-cell">3</div> 
    </div> 
</div> 

CSS:

.wrapper { 
    width: 100%; 
    background: #E0E0E0; 
    text-align: center; 
} 

.tb { 
    display: table; 
    width: 100px; 
    background: silver; 
} 

.tb-cell { 
    display: table-cell; 
} 

Answer 1

Проблема заключается в том, что

text-align CSS свойство описывает, как строковое содержимое, как текст выравнивается в его родительский элемент блока.

Тогда он не может центрировать элемент с display: table, потому что это не встроенный контент.

Но вы можете использовать inline-table вместо:

.tb { 
    display: inline-table; 
} 

Demo

Answer 2

Добавьте к этому классу:

.tb { 
    display: table; 
    width: 100px; 
    background: silver; 
    margin: auto; 
    overflow: hidden; 
} 

Демо: http://jsfiddle.net/gpq95d26/3/