Почему не работает text-align: center?
 

В данном примере не работает стиль text-align: center для таблицы - таблица выравнивается по левому краю div.
Текст выравнивается как положено по центру.
Подскажите кто знает - по чему так происходит и как выровнять таблицу по центру?

<style>
div{text-align: center; width: 100%; border: 1px solid red;}
table{border: 1px solid green;}
td{background-color: yellow; width: 50px;}
</style>
<div>
тестовый текст
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
</div>

shurik_shink,

table{border: 1px solid green; margin:0 auto;}

shurik_shink,
Зачем ты задаешь диву такую ширину?

width: 100%;

Он блочный и по умолчанию растягивается на всю ширину
Так что, если ты не планируешь переопределять его display, это лишнее

shurik_shink,

text-align: center

не работает из-за того, что у div свойство

display: block;

А у таблицы (по стандарту и умолчанию):

display: table;

Там короче конфликт происходит.

shurik_shink, для таблицы:

display: inline-table;