IE 11に中央寄せが効かなかったときの対処
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だったらしく、ラッパー適用で直った。
こちらの記事もオススメです