IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法

ChromeとEdgeでは意図通りに動く。でも、IE11だけ動かない・・・

そんなバグがあって四苦八苦したので対処法メモ。

どうにかして「Chrome」「Edge」「IE11」の動作を同一にすることが出来ました。

スポンサーリンク

やりたいこと

こんな感じ。
div要素の中に文字を均等に真ん中に配置したい。

その時の記述がこんな感じ。

<div class="parent">
  <span class="child">
    test
  </span>
</div>
.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: green;
  min-height: 90px;
}
.child {
}

flexboxのalign-items: centerで、高さ指定した親のdiv要素に対してspan要素を中央寄せしています。

上記のコードでChromeとEdgeでは意図通り中央寄せされ、めでたしめでたし。

と、思いきやIE11の環境だと、このコードでは正しく中央寄せされません。

Internet Explorer11 対策

IE11で上記のコードを実行すると以下のようになります。

ご覧の通り、中央寄せが効いていません。
flexboxのバグで他のブラウザとは違う挙動が起きます。

正しく中央寄せするには別の対策を取る必要があります。

対策1: min-heightをheightに変更する

IE11特有のバグで高さが認識されていないため、heightに変更して高さを指定します。
これで中央寄せが行われています。

しかし、min-heightをどうしても使わなければならない時には向きません。

.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: green;
  height: 90px;
}
.child {
}

対策2: table-cell化する

子のspan要素をtable化して親要素の高さと同じ指定をします。
そして、vertical-align: middle で中央寄せを実現しています。

@media all and (-ms-high-contrast:none) {
    .child {
        display: table-cell;
        min-height: 90px;
        vertical-align: middle;
    }
}

@media all and (-ms-high-contrast:none) はIE専用のCSS指定。
IEだけtable化すれば十分なのでこちらの指定。

かなり応急処置的な方法なのであまりオススメできません。

対策3: display:flexのラッパー要素を追加する

これがベストの解決方法です。flexboxのラッパー要素を追加するだけ。

何故か分かりませんが、これだけでIE11でも正しく中央寄せが効きます。

<div class="wrapper">
  <div class="parent">
    <span class="child">
      test
    </span>
  </div>
</div>
.wrapper {
  display: flex;
}
.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: green;
  min-height: 90px;
}
.child {
}

まとめ

IE11でflexboxのmin-heightとaligin-items: centerの組み合わせで起きるバグの対処法

flexboxのラッパー要素を追加しよう

おわり

参考

flexboxのバグに立ち向かう(flexboxバグまとめ)/ @hashrock

IE flexbox vertical align center and min-height [duplicate] / stackoverflow