margin:0 auto;の中央揃えができません。

milkcocoaでチャットアプリを作成しておりますが、
チャットの文字が表示される箇所をブラウザ画面の左端ではなく中央揃えにしたいと考えています。

そこで、html、cssに以下のコードを記載していますが、左端に表示されたままになっております。
お知恵をお貸し頂けますでしょうか。

.center {
    width:100px;
    height:100px;
    margin:0 auto;
}

<div class="center">
   <textarea id="msg" cols="100" rows="7"></textarea>
   <button id="button">メッセージ送信</button>
   <ul id="board">
      <div id="sample" onclick="addElement()">click me</div>   
   </ul>
</div>