IEでmargin:autoが効かない（センターに寄らない）

詰まったのでメモ。
どこ調べてもtext-align:centerのこと言われますが、
自分はそれでは治りませんでした。。

1.不具合内容

IEで表示したときだけ一部の要素が真ん中に寄らない。

header
main
footer

とあって、mainだけ中央に寄らない。

1-1.IEのバージョン

２つで試しました。

1-2.ページの構造(html)

<header>
  <div class="center">
  </div>
  <nav class="center">
  </nav>
</header>
<main class="center">
  <!--  ★この領域がセンターに寄らない  -->
</main>
<footer>
  <div class="center">
  </div>
</footer>

1-3.ページの構造(css)

.center {
    width: 960px;
    margin:0px auto;
}

2.原因

bodyタグ内の１階層目には margin:0px auto; センター寄せができないみたい。
ちなみに text-align:center も効きませんでした。

3.対策

単純に２階層目にズラしました。

<header>
  <div class="center">
  </div>
  <nav class="center">
  </nav>
</header>
<main>
  <div class="center">
  <!--  ★header, footerのようにセンターに寄る！！  -->
  </div>
</main>
<footer>
  <div class="center">
  </div>
</footer>

4.原因

有識者の方々にコメントいただき、判明しました。
（myakura@githubさん、tsuyoshi_choさん、ありがとうございます！）

myakura@github さんより

IEでは「mainという名前のついた見知らぬ要素」として扱われています。
で、こうした要素のスタイルはdisplay: inlineとして扱われるので、
margin: 0 autoによるセンタリングがききません。

さらにtsuyosh_choさんより

コメントいただいていた別の方のIE向け別対策でも取り上げられていましたが、
IE11では、mainにブロック要素を指定しないと
デザインが崩れてしまうケースがあるみたいです。

Web屋さんは大変だなと痛感しました…
というわけで、別対策をば。

x.追記:別対策

別の対策がありました。

このmain要素に display:block; とするだけで解決です。
（本当はIE11にだけ適応するのがベストだと思います）

.center {
    width: 960px;
    margin:0px auto;
}

/* ★追加 */
main {
    display:block;
}