Edited at

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

More than 3 years have passed since last update.

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

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を削っていったところ、治った&原因判明。


原因

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

参考文献

https://msdn.microsoft.com/ja-jp/library/jj127304(v=vs.85).aspx#start

↑の文献のcenterの項目に「余白の指定はなんか変なことなるよ」的な文章が書いてあったので、試しにmargin: 0にしたところ、綺麗に左右中央揃えしました。