IE 11に中央寄せが効かなかったときの対処

2018年9月22日カテゴリー

Webページ作成で中央寄せにはCSS3から導入されたFlexboxを使うと楽で便利。

親要素にdisplay:flex;
中央寄せを適用させたい子要素に
上下ならalign-items:center;
左右ならjustify-content:center;

これだけなのだが、いろいろ付け足していくとなぜかFlexboxに対応しているはずのInternet Explorer 11(IE 11)には適用されなくなることがある。

以下原因となり得る箇所を修正

Flexショートハンドで記述を省略してflex:1;にしていたのを全部書いてflex:1 0 0%;に変更
margin:0 auto;をmargin:0;に変更またはpaddingを使用する
Flexboxの中央寄せを使用していた箇所に、min-heightを使用していたので親要素にDIVなどの要素でラッパー(wrapper)として包んで、display:flex;を親要素と同様に適用する

以上を修正することでIE 11にも再び中央寄せが適用された。

最終的に原因はmin-heightだったらしく、ラッパー適用で直った。