IE11でjusty-content: centerしてるのに両端中央揃えできない時の原因

すごいハマったのでメモ。

IE11はflexに対応しているので不具合無いだろう...と考えてガンガンつかっていいった結果、見事につまづきました。

事の発端

簡単な例ですが、↓のようにflexを使用してたら、.childが右揃えになりました。

<div class="container">
  <div class="child">いんたーねっとえくすぷろーらー</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 400px;
    height: 80px;
}

.child {
    margin: 0 auto;
    width: 200px;
    height: 20px;
}

align-itemは効いているし、ググっても関連したものが出ず...
caniuseにもそれらしい文献は見当たらず...
とりあえず適当にCSSを削っていったところ、治った&原因判明。

原因

.childのmargin: 0 autoの部分がダメだったようです。

参考文献
https://msdn.microsoft.com/ja-jp/library/jj127304(v=vs.85).aspx#start
↑の文献のcenterの項目に「余白の指定はなんか変なことなるよ」的な文章が書いてあったので、試しにmargin: 0にしたところ、綺麗に左右中央揃えしました。