◆ display: flex; + align-items: center; 子要素に margin: auto;
または
◆ display: flex; + justify-content: center; align-items: center;

HTML で要素を上下左右中央揃えしたいことはよくありますよね
flexbox だと簡単なのですが IE11 でも見れるようにしないといけない場合は メンドクサそうです

ですが 実は IE11 は display:flex; が使えます
でも 使えるからといってちゃんと動くかは別問題です


Chrome だと
<div style="
width:300px;
height:300px;
background:yellow;
display:flex;
flex-direction:row;
">
<span style="margin:auto;">a</span>
</div>

これで上下左右の中央揃えです

ieflex01

ですが

IE11 だと

ieflex02

左右は中央揃えですが上下が中央揃えされず上側にあります

デフォルト値が違うのかなと justify-content と align-items も書いて center にしてみました
<div style="
width:300px;
height:300px;
background:yellow;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
">
<span style="margin:auto;">a</span>
</div>

Chrome は変わらず中央揃えになっています

IE11 でみてみると

ieflex03


な ぜ !?

上下は中央揃えになりましたが 右に揃っています


ここでは flex-direction が row なので

justify-content が横方向 text-align のような扱いです
align-items は縦方向 vertical-align のような扱いです


もともとは左右の中央揃えで上下が中央に来ていなくて 今回ので上下が中央揃えで左右が中央に来なくなったので justify-content をなくして align-items だけにしてみます
<div style="
width:300px;
height:300px;
background:yellow;
display:flex;
flex-direction:row;
align-items:center;
">
<span style="margin:auto;">a</span>
</div>

ieflex01

無事上下左右中央揃えになりました


なぜか IE は justify-content を center にすると中央じゃなくて右側に来ます

もう少しいじっていると
<div style="
width:300px;
height:300px;
background:yellow;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
">
<span>a</span>
</div>

子要素の margin:auto; を外せば justify-content:center; でも中央揃えできました

あと margin:auto; と justify-content:center; の両方をはずすと左揃えになります
これは他ブラウザも一緒です


IE11 は flex:display; で最新の書き方できるのはいいのですが動きが信用できないのはちょっと怖いところです