現象と原因と真因
現象
IE以外で問題ないのですが、以下のように左右中央揃するためにmarginを設定している要素（以下、box）が、なぜか右寄せになってしまう現象が発生しました。
.box { margin: 0 auto; }
原因
この発生条件は、marginを設定したboxの親要素（以下、container）に以下のように、「display:flex;」と「position: fixed;」を設定している場合にIEで表示するときです。
.container { display:flex; justify-content: center; align-items: center; position: fixed; }
このflexとその下2行のCSSの設定（以下、「display:flex;」）は、これを設定したcontainerの子要素boxに対して上下左右中央揃えにするためのものです。つまりこの設定があれば、「margin: 0 auto;」の設定自体が不要です。
boxのmarginの設定をなくすと、以下のように上下左右中央揃えで表示されました。
ちなみにcontainerのpositionをfixed以外にした場合も上下左右中央揃えで表示されます。
真因
この現象、発生条件がかなり限られたものように思えますが、問題が発覚したのは以下のようなモーダルウィンドウです。
当初はこのモーダルウィンドウのcontainerのCSSに以下のような設定をしていました。これはcontainerをブラウザ全体に広げて一番上に表示させるためです。
.container { z-index: 1000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
モーダルウィンドウは中央揃えにしたかったので「margin: 0 auto;」をしたのですが、上下中央揃えにはならない状態で設定を完了していました。
その後、上下中央揃えにするには「display:flex;」の設定でCSSで簡単にできるとのことを知って、containerのCSSに設定を追加したのです。「display:flex;」の設定で上下だけでなく左右も中央揃えになりますので、「margin: 0 auto;」は不要になりますが、そのままでもChromeなどのブラウザでは問題なかったので残してしまいました。
そしてIEでこの右寄せになる現象を見たときに、この残った設定の「margin: 0 auto;」を見て、IEで左右中央揃えが効かなくなってると勘違いしてしまったわけです。
設定変更時にIEで確認しなかったのも問題ですが、「設定の追加/変更を行う際に、以前の設定で不要になる部分を確認しなかった」のが今回の真因ですね。
というわけで、今回はIEでの「margin: 0 auto;」の左右中央揃えについてでした。
以上
